项目中最近有用到表单提交,是带有图片上传的表单录入,需要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" οnchange="javascript:setImagePreview();">上传图片</a></td>
        </tr>        
      </table>
        <input type="button" value="确认升级"  class="mg btn btn2 d2-5" οnclick="ajaxSubmitForm();"/>
          <input type="button" value="清除"  class=" btn btn2 d2-5" οnclick="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阻止表单再次提交
  }

转载于:https://www.cnblogs.com/DylanZ/p/6019611.html

jquery.form.js ajax提交上传文件相关推荐

  1. 解决 jquery.form.js和springMVC上传 MultipartFile取不到信息

    前段页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  2. ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件

    现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...

  3. jquery ajax java上传文件_jQuery Ajax方式上传文件的方法

    jQuery Ajax方式上传文件用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...

  4. php js跨域上传文件,Jquery实现跨域异步上传文件步骤详解

    这次给大家带来Jquery实现跨域异步上传文件步骤详解,Jquery实现跨域异步上传文件的注意事项有哪些,下面就是实战案例,一起来看一下. 先说明白 这个跨域异步上传功能我们借助了Jquery.for ...

  5. koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  6. node.js实现formdata上传文件

    node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口--FormData.利用 FormData 对象,我们可以通过 ...

  7. ashx获取input file 文件_通过Ajax方式上传文件(input file),使用FormData进行Ajax请求...

    一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...

  8. ajax怎么上传文件?注意事项

    ajax,即异步处理,相信程序员朋友们都会感觉到亲切吧,因为ajax在软件开发过程中实在是太常用了,还是有不少刚刚入门想学习软件开发的朋友可能不是很熟悉如何使用ajax,今天就一起来看看吧,怎样使用a ...

  9. java获取ajax上传的文件,Java使用Ajax异步上传文件

    相关代码示例: html代码片段: 名称 class="layui-input"> 描述 文件 请选择配置文件 立即提交 重置 js代码片段: //上传配置文件 $(&quo ...

最新文章

  1. php文件在网页,php文件读取到网页中
  2. 深入理解android卷II 即将发布
  3. mysql报错3534_win7下安装MYSQL报错:MYSQL 服务无法启动的3534问题
  4. C语言程序练习-L1-018 大笨钟 (10分)
  5. 2020年第十八届西电程序设计竞赛网络预选赛之Problem D 由比滨结衣的饼干(二分+前缀后缀)
  6. mysql 插入数据时 自动设置创建时间和更新时间
  7. python建模大赛算法_Python数据分析kaggle-Titanic+天池-工业蒸汽量预测建模算法
  8. 关于Oxygen版 Eclipse JSP或html 中option标签使用c:if报错的问题
  9. Android P (2)---Android 9.0 “Pistachio Ice Cream”新功能和特性
  10. 计算机ppt试题训练,powerpoint2010操作题 计算机POWERPOINT操作题
  11. 树链刨分 HDU 3966
  12. 《南溪的目标检测学习笔记》——特征归一化(meadstd)
  13. Effective系列经典著作,铺就程序员殿堂之路
  14. c语言控制单片机38译码器,单片机+38译码器控制的数码管怎么点亮?
  15. 研祥计算机U盘启动,研华工控机U盘启动设置
  16. 记一个embed嵌入flash、mp4播放视频
  17. Cisco 3850 Mgmt VRF Configuration
  18. 山东海王星·关于国内文旅水上乐园的运营营销构思
  19. 14种旅游消费陷阱警示录
  20. WebRtc的下载(未完,当前只下载了部分)

热门文章

  1. 整理一下Entity Framework的查询
  2. android图片混淆还原,图片混淆还原1.2版本
  3. ORM框架之Spring Data JPA(一)Hibernate实现JPA规范
  4. 图书配套光盘、部分软件下载
  5. git clone --depth=1引起的问题
  6. ts高仿C#的List、Dictionary
  7. 详解微信小程序开发(项目从零开始)
  8. dreamweaver cs6配置phonegap环境
  9. mappedbytebuffer_小师妹学JavaIO之:MappedByteBuffer多大的文件我都装得下
  10. ✨Synchronized底层实现---概述