html5 ajax文件上传

[html]  view plain  copy

 

1. <input style="display: none" id="harg_file" type="file" accept="application/zip"/>  

[javascript]  view plain  copy

 

1. $("#harg_file").change(function(){  
2.    var fd=new FormData();  
3.    fd.append("file",$(this).get(0).files[0])  
4.    $.ajax({  
5.       url:"/test/upload/",  
6.       type:"POST",  
7.       processData: false,  
8.       contentType:false,  
9.       data: fd,  
10.       xhr: function() {  // custom xhr  
11.          myXhr = $.ajaxSettings.xhr();  
12.          if(myXhr.upload){ // check if upload property exists  
13.             myXhr.upload.addEventListener('progress',function(evt){  
14.                $( "#upload_tip").dialog("open");  
15.                var percentComplete = Math.round(evt.loaded*100 / evt.total);  
16.                console.log(percentComplete);  
17.             }, false); // for handling the progress of the upload  
18.          }  
19.          return myXhr;  
20.       },  
21.       success:function(data){  
22.          console.log("----");  
23.       }  
24.    });  
25. });  

上传文件只能是“POST”提交；processData: false,contentType:false,这两个参数必须有，且必须为false，processData为false代表jQuery不会将穿到服务器的data解析为字符串；contentType为false，根据官方文档，这个是一个字符串值，如“application/json”或者“application/x-www-form-urlencoded”之类的。查看jquery源代码

[javascript]  view plain  copy

 

1.              // Set the correct header, if data is being sent  
2. f ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {  
3. jqXHR.setRequestHeader( "Content-Type", s.contentType );  

如果 contentType为false，则不会为jqXHR设置请求头Content-Type。我猜测XMLHttpRequest在没有Content-Type的情况下，并且发送的数据为FormData对象的话，浏览器会为其生成boundary，默认以multipart/form-data+boundary作为Content-Type。

在用form上传文件时，content-type是multipart/form-data，但这里不能写multipart/form-data，用debug工具查看form上传文件时的content-type，其实真正的值是“multipart/form-data; boundary=----WebKitFormBoundaryUalLNdJ5BjmXlLhv”，分隔符boundary一般是由浏览器自己产生，最后不要自己手动写。如果我们把contentType的值写成“multipart/form-data; boundary=----WebKitFormBoundaryUalLNdJ5BjmXlLhv”应该也是可以的，但不推荐。

关于XMLHttpRequest和FormData的API可参考

https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData