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 ...
随机推荐
- echo "" > 和 echo "" >> 的区别
在写shell脚本中,如果判断一个文件已经存在,但希望重写这个文件,一般用如下方式 echo "" > file.txt 这个表示清空文件的内容,如果使用 echo “” & ...
- python3高级编程
1. SMTP发送邮件 internet相关协议: http:网页访问相关,httplib,urllib,xmlrpclib ftp:文件传输相关, ftplib, urllib nntp:新闻和帖子 ...
- Linux中,去掉终端显示的当前目录的绝对路径
Linux中,去掉终端显示的当前目录的绝对路径 去~/.bashrc中,找到PS1变量的定义,如果没有,手动加上: 可以将显示输出到标题栏上: #export PS1="[e]2;u@H w ...
- Java第一次实训
package com.wsy.work; public class JudgeNumber { public static void main(String[] args) { int a = 5; ...
- delphi 怎么实现主窗口退出时,有一个提示框?
无论点窗口上的[按钮]还是[右上角的叉],能出现一个提示窗口,“是”-退出窗口,“否”-重新登录(调出登录窗口),“取消”-返回.MessageBox能实现吗?还是要调用新窗口(我调用窗口,有些错误) ...
- TP5系统变量输出
1.超全局变量 模板中: {$Think.sever.server_name} //全部小写,输出blog.cn 控制器: $_SERVER['SERVER_NAME'] ...
- React 学习(七) ---- create-react-app
现在react 基础知识已经算是学完了,知道了React是做什么的,以及怎么使用,是时候学习一个webpack, babel 等现代化前端开发了,真正做项目的时候,我们不可能再使用babel 的线上编 ...
- M - 约会安排 HDU - 4553 线段树 (最长连续段)
中文题面 思路:维和两个区间 一个是女神区间 一个是基友区间 如果是基友要预约时间 直接在基友区间查询可满足的起点 (这里先判tree[1].m >=length也就是有没有这样的区间满足时 ...
- MySql的CURRENT_TIMESTAMP
在创建时间字段的时候 DEFAULT CURRENT_TIMESTAMP表示当插入数据的时候,该字段默认值为当前时间 ON UPDATE CURRENT_TIMESTAMP表示每次更新这条数据的时候, ...
- project 2013 工时完成百分比不会自动更新填充
[工时完成百分比].[实际完成百分比] 需要手填 [完成百分比] 会自动填,如下图