之前项目中有个文件上传了需求,于是直接就使用了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 +"%");
}