项目中最近有用到表单提交,是带有图片上传的表单录入,需要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阻止表单再次提交
  }

jquery.form.js ajax提交上传文件的更多相关文章

  1. [Asp.net mvc]jquery.form.js无刷新上传

    写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...

  2. jquery.form.js实现异步上传

    前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...

  3. jquery.form.js 实现异步上传

    前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...

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

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

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

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

  6. JS 异步分段上传文件

    为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...

  7. ajax如何上传文件(整理)

    ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...

  8. Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

    目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...

  9. (23)ajax实现上传文件的功能

    form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...

随机推荐

  1. 关于wordpress更新提示无法创建目录问题

    说说自己的看法和解决办法 看法: 网上很多人说:是权限问题,那么将文件目录权限设置为777就可以解决.恩,没错,是可以解决更新问题,可是却带来了更大的问题——安全.像他们这个设置后,网站被攻破,数据被 ...

  2. fiddler 笔记-设置断点

    设置断点后,可以修改httprequest的任何信息包括:host,cookie或都表单中的数据 1 Fiddler--rules--Automatic Breakpoint --before Req ...

  3. 学习 Spring (十三) AOP 配置

    Spring入门篇 学习笔记 Spring 所有的切面和通知器都必须放在一个 内(可以配置包含多个 元素),每一个 可以包含 pointcut, advisor 和 aspect 元素(它们必须按照这 ...

  4. BZOJ 1443 游戏(二分图博弈)

    新知识get. 一类博弈问题,基于以下条件: 1.博弈者人数为两人,双方轮流进行决策.2.博弈状态(对应点)可分为两类(状态空间可分为两个集合),对应二分图两边(X集和Y集).任意合法的决策(对应边) ...

  5. [离散时间信号处理学习笔记] 9. z变换性质

    z变换描述 $x[n] \stackrel{\mathcal{Z}}{\longleftrightarrow}X(z) ,\quad ROC=R_x$ 序列$x[n]$经过z变换后得到复变函数$X(z ...

  6. HackerRank beautiful string

    问题 https://vjudge.net/problem/HackerRank-beautiful-string 给一个字符串S,可以任意取走S中的两个字符从而得到另外一个字符串P,求有多少种不同的 ...

  7. Nginx 决策浏览器缓存是否有效

    expires指令是告诉浏览器过期时间 syntax:expires [modified] time; eopch | max | off; default : off context :http,s ...

  8. python optparser模块

    python的内置模块中对于命令行的解析模块共两个getopt 和 optparse .不过getopt过于简单,往往不能满足需求.此时可以使用optparse模块.这个模块相对于getopt更新,功 ...

  9. 云服务器ECS

    云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...

  10. [HDU5536] Chip Factory

    传送门:>Here< 题意:给出一个长度为N的序列,求$Max\{ (a_i + a_j) ⊕ a_k \}$ (i,j,k均不相同)  ($N \leq 1000$) 解题思路 既然$O ...