H5实现formdata+ajax+上传进度上传文件

技术点：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+