我想通过jQuery异步上传文件，这是我的HTML:

 

1
2
3
<span>File</span>
<input type= "file" id= "file" name= "file" size= "10" />
<input id= "uploadbutton" type= "button" value= "Upload" />

这是我的javascript:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function () {
   $( "#uploadbutton" ).click(function () {
     var filename = $( "#file" ).val();
 
     $.ajax({
       type: "POST" ,
       url: "addFile.do" ,
       enctype: 'multipart/form-data' ,
       data: {
         file: filename
       },
       success: function () {
         alert( "Data Uploaded: " );
       }
     });
   });
});

我只得到上传的文件名，咋办？

 

我现在用了 jQuery Form插件来解决这个问题：http://malsup.com/jquery/form/#code-samples

有没有不用该插件来实现呢？

 

解决方法：

可以采用HTML5，用jQuery,Ajax实现文件上传，不仅如此，你可以做文件验证（名称，大小，MIME类型）或利用HTML5的进度标签（或者div）处理进度事件。

 

最近我也在做文件上传，我不想用flash、iframe或其它插件，经过一番研究，我想出了解决方案。

HTML:

 

1
2
3
4
5
<form enctype= "multipart/form-data" >
<input name= "file" type= "file" />
<input type= "button" value= "Upload" />
</form>
<progress></progress>

首先，你可以做一些验证，例如文件的onChange事件：

 

1
2
3
4
5
6
7
$( ':file' ).change(function(){
     var file = this .files[0];
     name = file.name;
     size = file.size;
     type = file.type;
     //your validation
});

按钮点击触发Ajax:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$( ':button' ).click(function(){
     var formData = new FormData($( 'form' )[0]);
     $.ajax({
         url: 'upload.php' ,  //server script to process data
         type: 'POST' ,
         xhr: function() {  // custom xhr
             myXhr = $.ajaxSettings.xhr();
             if (myXhr.upload){ // check if upload property exists
                 myXhr.upload.addEventListener( 'progress' ,progressHandlingFunction, false ); // for handling the progress of the upload
             }
             return myXhr;
         },
         //Ajax事件
         beforeSend: beforeSendHandler,
         success: completeHandler,
         error: errorHandler,
         // Form数据
         data: formData,
         //Options to tell JQuery not to process data or worry about content-type
         cache: false ,
         contentType: false ,
         processData: false
     });
});

处理进度：

 

1
2
3
4
5
function progressHandlingFunction(e){
     if (e.lengthComputable){
         $( 'progress' ).attr({value:e.loaded,max:e.total});
     }
}

 

 

HTML5的文件上传非常简单，但必须在支持HTML5的浏览器中运行。