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阻止表单再次提交
}
jquery.form.js ajax提交上传文件的更多相关文章
- [Asp.net mvc]jquery.form.js无刷新上传
写在前面 最近在自己的网盘项目中想用ajax.beginform的方式做无刷新的操作,提交表单什么的都可以,但针对文件上传,就是个鸡肋.在网上查找了发现很多人都遇到了这个问题,大部分都推荐使用jque ...
- jquery.form.js实现异步上传
前台页面 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewpor ...
- jquery.form.js 实现异步上传
前台: <form id="formSeacrh" action="/ResumeInfo/uploadFile" method="post&q ...
- 解决 jquery.form.js和springMVC上传 MultipartFile取不到信息
前段页面: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- JS 异步分段上传文件
为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...
- ajax如何上传文件(整理)
ajax如何上传文件(整理) 一.总结 一句话总结:用FormData,FormData+ajax=异步上传二进制文件 <form enctype="multipart/form-da ...
- Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)
目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...
- (23)ajax实现上传文件的功能
form表单上传文件 urls.py from django.conf.urls import urlfrom django.contrib import adminfrom app01 import ...
随机推荐
- PLA-1
PLA(Principal Component Analysis)主成分分析: 思路1:坐标旋转 1.数据分布以及投影: 2.特征值以及特征向量 思路2: 未完待续...
- Partition算法以及其应用详解下(Golang实现)
接前文,除了广泛使用在快速排序中.Partition算法还可以很容易的实现在无序序列中使用O(n)的时间复杂度查找kth(第k大(小)的数). 同样根据二分的思想,每完成一次Partition我们可以 ...
- 命名自我规约manual
前端: 所有文件命名都小写,多个单词连接使用 “-” 变量命名规则还是驼峰式,或者在前面加个 “_” SQL: MySQL: 所有命名都小写,无论库.表.还是字段等等,都小写 多个单词之间的分隔,使用 ...
- vue起步和模板語法
vue構造器里有哪些內容: var a=new Vue({}) 模板語法: 文本插值: html: html的屬性里的值應該使用v-bind: 表達式: 指令; 參數:v-bind,v-on 雙向用戶 ...
- Nginx 用分片提示缓存效率
L:107 slice 模块 Syntax:slice size;Default: slice 0; Context:http, server, location 功能:通过range协议将大文件分解 ...
- BZOJ4912 SDOI2017天才黑客(最短路+虚树)
容易想到把边当成点重建图跑最短路.将每条边拆成入边和出边,作为新图中的两个点,由出边向入边连边权为原费用的边.对于原图中的每个点,考虑由其入边向出边连边.直接暴力两两连边当然会被卡掉,注意到其边权是t ...
- POJ1442-查询第K大-Treap模板题
模板题,以后要学splay,大概看一下treap就好了. #include <cstdio> #include <algorithm> #include <cstring ...
- P1495 曹冲养猪
原题链接 https://www.luogu.org/problemnew/show/P1495 这个题明显的中国剩余定理(孙子定理),如果有不懂孙子定理的点这个链接https://baike.bai ...
- hdu 1540 Tunnel Warfare(Treap)
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1540 思路:三种操作: D摧毁一个点 R重建最晚被修改的那个点 Q询问点x联通的点有多少个 逆向思维,D操 ...
- new 经典基础模板总结
NOIP-NOI-ZJOI基础模板总结 目录 C++语言和STL库操作 重载运算符操作 /* 重载运算符 格式 如重载小于号 这里是以x递减为第一关键字比较,y递减为第二关键字比较 */ bool o ...