使用jquery-form.js表单提交文件上传方式

 

最近在做兼容IE低版本的项目，那么如果您的项目中需要上传文件，且能需要进度，同时传递另外的data数据，那么form.js 是值得你使用的，废话不多说，直接上代码

需要一个表单， enctype 需要设置为 "multipart/form-data"  以表单格式提交 这里不做深究

<form  name="form"  action="{:Url('Relbatch/setImportData')}" enctype="multipart/form-data"  method="post"  id="frm1">  
  <input type="file" id="file_upload" class="file" name="file"> 
  <input type="hidden" value="" name="data_source" id="data_source">
  <input type="hidden" value="" name="order_type" id="order_type">
  <button type="button"  class="btn fill_max_but " id="add_ex" >确定</button>
 </form>

$("#add_ex").on("click",function(){              
   $('#frm1').ajaxSubmit({
     url : setImportDataUrl,
     success : function(data) { 
         var data=JSON.parse(data);
         //  成功后代码  
     },
     beforeSend: function(){
        // 上传前
     },
     uploadProgress: function(event, position, total, percentComplete) {
        //上传的过程
        //position 已上传了多少
        //total 总大小
        //percentComplete 已上传的百分数
      },
      error : function(data) {
        //   失败后代码
      }
     })    
 
});

注意！！！

这里要注意的是：如果兼容IE低版本那么后端返回数据格式一定不要返回JSON格式，

因为IE浏览器会把返回的json格式数据当成文件，直接弹出，提示你下载或者打开保存。

IE浏览器不可以用js模拟点击事件 trigger("click")  来操作，提示 拒绝访问！！！

操作：作者提供的示例

——————————————           end         ——————————————————————