之前項目中有個文件上傳了需求,於是直接就使用了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> '+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 +"%"); }