技术点：1）H5 formData(),2）XMLHttpRequest()

利用 FormData 对象，我们可以通过 js 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

案例：

 

$inputObj.change(function(){    var file = $(this)[0].files[0];    makeDoThisFile(file);});function makeDoThisFile(file){    var size = file.size,        type = file.type,        name = file.name;    //创建FormData对象    var formDataA = new FormData();　　　　//添加文件　　　　formDataA.append('file',file);    //添加提交按钮    formDataA.append("submit", "submit");   //创建ajax对象    var xhr = new XMLHttpRequest();     xhr.open('POST','php/uploadFile.php',true); // 异步传输    //文件上传进度    xhr.upload.onprogress = function (ev) {
   //        var percent = 0;          if(ev.lengthComputable) {               percent = 100 * ev.loaded/ev.total;               console.log('已经上传'+percent);         }      }     //发送请求     xhr.send(formDataA);     //执行回调函数     xhr.onreadystatechange = callBlack;     //执行ajax回调函数    function callBlack(){        var readyState = xhr.readyState;//HTTP 请求的状态        var status = xhr.status;//请求的状态码        //如果HTTP 响应已经完全接收。并且 由服务器返回的 HTTP 状态代码，如 200 表示成功            if(readyState == 4 && status == 200){                　　var response   = xhr.responseText;//目前为止为服务器接收到的响应体                 console.log(response);              }       }; }

 

 

兼容须知：

Chrome 7+

Firefox (Gecko2.0+) 4.0+

Internet Explorer 10+

Opera 12+

Safari 5+