jquery.form.js ajax提交上傳文件

      項目中最近有用到表單提交,是帶有圖片上傳的表單錄入,須要ajax異步提交,網上找了好多例子都是隻能提交上傳字段一個信息的,這裏整理一下。表單裏有普通文本信息字段也有圖片上傳字段。javascript

     一、jsp代碼--引入jquery和jquery.form.js
        <script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script>java

        <!--form表單,異步提交必定使用submit按鈕,form配置以下-->jquery

 <form id="userForm" method="post" action="" enctype="multipart/form-data" class="bl-form bl-formhor fl">
           <table>
      <tr>
          <td class="Taa"><label for="enterpriseName">*企業名稱:</label></td>
          <td class="Tbb"><input type="text" name="enterpriseName" id="enterpriseName" readOnly class="inp1"/></td>
        </tr>
        <tr>
          <td class="Taa">身份證圖片:</td>
          <td><a href="javascript:;" class="btn btn2 a_uplaod"><input type="file" name="identitypic" id="pic" onchange="javascript:setImagePreview();">上傳圖片</a></td>
        </tr>        
      </table>
        <input type="button" value="確認升級"  class="mg btn btn2 d2-5" onclick="ajaxSubmitForm();"/>
          <input type="button" value="清除"  class=" btn btn2 d2-5" onclick="resetForm();"/>
         </form>ajax

 

       二、javascript代碼json

         function ajaxSubmitForm() {
       var option = {
            url : '${pageContext.request.contextPath}/userController/upgradeUser_form',
            type : 'POST',
            dataType : 'json',
            headers : {"ClientCallMode" : "ajax"}, //添加請求頭部
            success : function(data) {
                if("success"==data.resultMessage){
                 alert("我的用戶已成功升級爲企業用戶!");
              }
              else{
               alert("企業用戶升級失敗,請聯繫管理員!");
               return;
              }
          },
          error: function(data) {
              alert("企業用戶升級失敗,請聯繫管理員!");
          }
       };
      $("#userForm").ajaxSubmit(option);
      return false; //最好返回false,由於若是按鈕類型是submit,則表單本身又會提交一次;返回false阻止表單再次提交
  }異步

相關文章
相關標籤/搜索