html5 ajax文件上传

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

$("#harg_file").change(function(){
var fd=new FormData();
fd.append("file",$(this).get(0).files[0])
$.ajax({
url:"/test/upload/",
type:"POST",
processData: false,
contentType:false,
data: fd,
xhr: function() { // custom xhr
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',function(evt){
$( "#upload_tip").dialog("open");
var percentComplete = Math.round(evt.loaded*100 / evt.total);
console.log(percentComplete);
}, false); // for handling the progress of the upload
}
return myXhr;
},
success:function(data){
console.log("----");
}
});
});

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

// Set the correct header, if data is being sent
if ( s.data && s.hasContent && s.contentType !== false || options.contentType ) {
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