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