js 無刷新文件上傳 (兼容IE9 )

 以前項目中有個文件上傳了需求，因而直接就使用了FormData對象異步上傳，可是在測試得時候發現ie9沒法正常上傳（項目要求兼容IE9+),無奈，查資料得知IE9- 版本不支持formdata對象得異步上傳！

怎麼辦呢？那就用表單提交吧。以前異步上傳得接口後臺返回的是JSON串，表單提交的話IE會提示將後臺返回的json數據保存到本地，影響體驗，無奈又讓後臺寫了一個接口返回頁面。

因此下面針對ie9又用了不一樣的接口，若是使用同一個接口返回的格式不能爲json,最好爲xml/html  。

爲了頁面不刷新，參考了公用得作法，直接將formtarget給了隱藏的iframe,這樣表單提交後iframe就能處理提交後返回的數據，保持原始頁面不被刷新，而後檢測iframe是否加載完成，若是iframe接收到後臺的數據加載完成得話，則證實form表單提交成功，表明文件上傳成功。而後刷新當前頁面展現已經上傳得文件信息。

 

下面是主要代碼：

//這裏是html部分
<form id="fileUploadF" method="post" target="formUpFile" class="form form-group text-right" enctype="multipart/form-data">
      <input type="file" id="fileUpIpt" class="fileUpIpt form-inline" accept="*/*" name="files" multiple="multiple" >
      <input type="hidden" name="qblcId" value="${qblcId}">
      <button id="btn_uploadfile" class="btn btn-sm btn-default upload-btn">
         上傳附件
       </button>
</form>
<iframe id="formUpFile" border="none" width="0" height="0" name="formUpFile"></iframe>

 

js部分

//綁定click事件，監聽提交按鈕
$("#btn_uploadfile").click(function(){
        $("#fileUpIpt").trigger("click");//觸發input[type=file]上傳
        return false;
});

// 監聽iframe是否加載完成              
$('formUpFile').load (function(){
      location.reload();//加載完成執行刷新
})
    
//監聽是否上傳新的文件            
$("#fileUpIpt").change(function(){
     if($(this).val() != ""){
          try{//嘗試直接使用異步上傳
                var formData = new 
                     FormData(document.getElementById("fileUploadF"));
                ajaxFileUpload(formData);
                 return false;
                }catch(err){ //若是不支持異步上傳則使用表單提交   
                  //給form添加action地址並執行提交
                   $("#fileUploadF")
                    .attr("action","/TY/uploadFileforie9").submit();
                            
            }
       }  
                    
})

 

如下就是ajax 文件上傳的函數部分，不作過多解釋，這裏添加了上傳進度條

//ajax文件上傳主函數
 function ajaxFileUpload(datas){
      var index;
      $.ajax({
            type:"post",
            url:"${appPath }/TY/uploadFile",
            async:true,
            data:datas,
            contentType: false,  
            processData: false,  
            xhr:function(){
            var xhrObj = $.ajaxSettings.xhr();
             if(onprogress && xhrObj.upload) {
                　xhrObj.upload.addEventListener("progress" , onprogress, false);
                　　　　　　　return xhrObj;
                　　　　　}                
                    },
             success:function(res){
                   if(res.checkResult == "1"){                            
                       var fileList = res.result.files,addStr = "";
                       $.each(fileList, function(i,item) {
                       var fileNames = '<td><span class="glyphicon glyphicon-file" aria-hidden="true"></span>&nbsp; '+item.doc_name+'</td>'
                                addStr += '<tr><td>'+(i+1)+'</td>'+fileNames+'<td><span onclick="delectFile(\''+item.doc_id+
                                    '\')" class="glyphicon glyphicon-trash del_ico" aria-hidden="true"></span></td>'+
                                    '<td><span onclick="downloadFileById(\''+item.doc_id+'\',\''+item.doc_name+
                                    '\')" class="glyphicon glyphicon-save download_ico" aria-hidden="true"></span></td></tr>'
                            });                            
                            $(".flieUpList tbody").html(addStr);                            
                        }else{
                            layer.alert(res.errorInfo);
                        }
                    }
                });
            }
            
            // 附件上傳狀況    ,這個方法大概0.05-0.1秒執行一次
            function onprogress(evt){
                $(".progress_wrap").show();
                var loaded = evt.loaded;                  //已經上傳大小狀況 
                var tot = evt.total;                      //附件總大小 
                var per = Math.floor(100*loaded/tot);     //已經上傳的百分比  
                
                if(per==100){
                    layer.msg("上傳成功! 正在處理請稍後...",function(){
                        $(".progress_wrap").hide();
                    });                    
                }
            　　 $("#porcessBar").html( per +"%" );
                $("#porcessBar").css("width" , per +"%");
            }