zoukankan      html  css  js  c++  java
  • jquery.form.js ajax提交上传文件

          项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下。表单里有普通文本信息字段也有图片上传字段。

         1、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>

            <!--form表单,异步提交一定使用submit按钮,form配置如下-->

     <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>

           2、javascript代码

             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阻止表单再次提交
      }

  • 相关阅读:
    Android Studio 编译不通过,报错“找不到org.apache.http
    Android studio中出现非法字符时的部分解决方法
    eclipse项目导入到Android Studio Plugin with id 'android-library' not found
    将Eclipse代码导入到AndroidStudio的两种方式
    eclipse项目迁移到android studio(图文最新版)
    Android studio插件安装
    ViewPager PagerAdapter不更新视图
    Android:可扩展伸缩listview
    Android的崩溃错误报告之ACRA
    Android数据库ORMlite框架04
  • 原文地址:https://www.cnblogs.com/jpfss/p/8963678.html
Copyright © 2011-2022 走看看