jqueryfileupload插件ie9遇到的问题

一、Chrome浏览器：

1、引入js

   jquery.ui.widget.js

   jquery.fileupload.js

2、页面元素

   <input type="file"name="Filedata" class="ebtn"

      style="width:22%;height:44px;background-color:#fff;"/>

3、js初始化input

functioninitUploadPlugin(){

   var iframe = false;

   if(isIe9()){

      iframe = true;

   }①

   $('input[name=Filedata]').fileupload({ 

        autoUpload: true,//是否自动上传 

        url:'/etrc/api/user/file_upload?savePath=/appendix/

            &maxFileSize=10',//上传地址 

        dataType: 'json',

       iframe:iframe, ②

        add: function(e, data) {

          eLoading(true);

          var acceptFileTypes = /(\.|\/)(PDF|pdf)$/i;

         if(data.originalFiles[0]['type'].length &&!acceptFileTypes.test(data.originalFiles[0]['type'])) {

              layer.msg("请上传pdf格式文档");

              eLoading(false);

             return;

          }

          if(data.originalFiles[0]['size'] && data.originalFiles[0]['size'] > (10*1024*1024)) {

              layer.msg("上传文档必须小于10MB！");

              eLoading(false);

              return;

          }

          data.submit();

       },

       done:function (e, data) {//设置文件上传完毕事件的回调函数 

          var res_data = data.result;

         if (200 == res_data.code) {

            var ext=res_data.info.type.split('.')

                      .pop().toLowerCase();

          }else{

              if(res_data.msg){

                eLoading(false);

                  layer.msg(res_data.msg,{icon:2});

                   return ;

              }

          }

        },

        always: function (e, data) {//设置文件上传完毕事件的回调函数 

          eLoading(false);

          layer.closeAll('loading');

        },

        fail:function (e, data) {//设置文件上传完毕事件的回调函数

          console.log(data);

          layer.msg("上传失败");

        },

     });

}

在Chrome浏览器中按以上步骤即可实现文件上传，在ie9（与通过高版本ie调整为ie9不同）中会遇到如下问题：

二、IE9

1、判断文件格式与大小：

   data.originalFiles[0]中只有name属性，获取不到type与size；

   解决：

      a.type:

      var type = data.originalFiles[0]['name'].split(".").pop();

       if(type!="pdf"&&type!="PDF"){

          layer.msg("请上传pdf格式文档");

          eLoading(false);

          return;

       }

      b.size:

      后台判断，执行完“add”,进入后台“/etrc/api/user/file_upload”，     Filedata.length()即可获取文件大小。

2、后台获取到的filedata为null

   解决：a.引入js jquery.iframe-transport.js

        b.在fileupload初始化方法中加上①②两端代码

3、通过上述1、2步骤后，后台上传成功，但在前台又出现提示下载的问题。

   解决：开始后台返回使用的是：renderJSON(info)，修改为：                  renderText(JSONObject.fromObject(info).toString())

三、为美化上传效果，有可能不直接使用input，而是通过其他元素触发input。

   如：

<input type="file"name="Filedata" class="ebtn"id='1' style="

   width:22%;height:44px; background-color:#fff;display:none;">

<label class="ebtnebtn-orange" style="width:83px;height:28px"    name="FiledataBtn" for="1">上传附件</label>

$('div[name=FiledataBtn]').click(function(){

   $(this).prev().trigger("click");

});  

注意标红部分，否则无效果。

 

四、使用过程中参考资料：

   http://www.jq22.com/jquery-info230

   https://www.cnblogs.com/silentjesse/p/3770253.html

   https://blog.csdn.net/m0_37808356/article/details/77089686

   https://segmentfault.com/a/1190000010816223