用jquery-form.js提交带文件的数据

Posted 2020-10-14 ~零度~

最近做一个项目需要同时向后台传文件和数据，经过多方考证，选择了使用jquery-form.js插件。所以总结一下，仅大家参考；

html部分：

 <form enctype="multipart/form-data" method="post" action="/api/auth/update/updateVersion" class="form form-horizontal form-member-add" id="updatereviseform" autocomplete="off">  　　 

　　<div class="row cl">

     　　　<label class="form-label col-xs-4 col-sm-4 col-md-4 col-lg-3"><span class="c-red">*</span>将发布软件版本号：</label>

      <div class="formControls col-xs-6 col-sm-8 col-md-6 col-lg-4 clearfix">
         <input type="text" class="input-text createversion f-l"  placeholder="请输入软件版本号"  name="softVersion">
         <span class="f-l"></span>
      </div>
  </div>

  <div class="row cl">
      <label class="form-label col-xs-4 col-sm-4 col-md-4 col-lg-3"><span class="c-red">*</span>升级文件选择：</label>
      <div class="formControls col-xs-6 col-sm-6 col-md-6 col-lg-6 clearfix">
　　　　　 <input type="file" multiple name="file"  class="file f-l" id="file" >
          <span class="f-l"></span>
      </div>
  </div>  
<div class="row cl">      
　　　　<label class="form-label col-xs-4 col-sm-4 col-md-4 col-lg-3"><span class="c-red">*</span>可升级的软件版本号：</label>

      <div class="formControls col-xs-6 col-sm-8 col-md-6 col-lg-4 clearfix">
           <input type="text" class="input-text software f-l"  placeholder="请输入可升级软件版本号"  name="updatedSoftVersions">
           <span class="f-l"></span>
      </div>
  </div>
  <div class="row cl">
      <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-4  col-sm-offset-4 col-md-offset-4 col-lg-offset-3 ">
         <input type="submit" class="completecreate" id="completecreate" value="">
         <input type="submit" class="cancelcreate" id="cancelcreate" value="">
      </div>
   </div>
</form>
js部分：

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.form.js"></script>

<script type="text/javascript">

　　$("#updatereviseform").submit(function()  {
       $(this).ajaxSubmit({
         success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
           if(data.code == 0){
               alert("提交成功")
                   
            }else{
               alert("提交失败")
            }
          }
      });
   　　return false;
　　});

</script>

只是一个简单的小案例，如有需要，可以留言沟通