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

原文地址:https://www.cnblogs.com/jpfss/p/8963678.html

时间: 2024-09-28 05:51:16

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

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

写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jquery.form.js的插件实现. demo 首先通过nuget安装插件jquery.form.js 引入js文件 <script src="~/Scripts/jquery.form.min.js"></script> 前端调用的代码 @{ ViewBag.Titl

jquery.form.js 实现异步上传

前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post" enctype="multipart/form-data"> <div class="form-horizontal"> <div class="form-group" style="height:100p

jquery.form.js实现异步上传

前台页面 1 @{ 2 Layout = null; 3 } 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta name="viewport" content="width=device-width" /> 8 <script src="~/Scripts/jquery-1.7.2.min.js"></script> 9 <scri

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

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

目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码 这里选择了formidable,也是githu

Ajax方式上传文件

用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 FormData 对象,还在用IE6 ? 只能仰天长叹.... 有了这两个对象,我们可以真正的实现Ajax方式上传文件. 示例代码: <!DOCTYPE html> <html> <head> <title>Html5 Ajax 上传文件</title>

SSM框架下,使用ajax请求上传文件(doc\docx\excel\图片等)

1.准备工作 1.1.添加上传必要jar包 <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId>

django中通过文件和Ajax来上传文件

一.通过form表单来上传文件 1.在html模板中 <form action="/index/" method="post" enctype="multipart/form-data">#在form属性中写入enctype="multipart/form-data" 这样form表单才能支持数据文件的提交 {% csrf_token %} 头像<input type="file" nam

解决ajax异步上传文件的问题

HTML: <form id="avater" name="formlist"> {{ csrf_field() }} <ul class="list-group container" style="width:50%"> <li class="list-group-item list" style="border-radius: 5px"> <