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 +"%");

            }

巴特西

js 无刷新文件上传 (兼容IE9 )

最新文章

热门文章