用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
2016-04-19 12:33
1146 查看
前两天用到ajax提交含上传图片的表单。实现的功能比较简单,但是使用ajax提交表单 form.serialize只能实现普通的字段提交,上传图片却不能使用。
网上很多都是推荐使用jquery.form.js先单独上传图片,返回上传后图片文件名再提交表单。但是我就是需要一起提交,发现jquery.form.js的ajaxSubmit()还挺好用,而且比单独上传图片更简单。
在此贴上代码实现:
js:
$("#ok").click(function() {
$("#gp").ajaxSubmit({
url : "xxx.action?action=saveOrUpdateObject",
type : "post",
dataType : 'json',
success : function(data) {
alert("设置成功!");
},
error : function(data) {
alert("error:" + data.responseText);
}
});
});
大概jsp代码:
网上很多都是推荐使用jquery.form.js先单独上传图片,返回上传后图片文件名再提交表单。但是我就是需要一起提交,发现jquery.form.js的ajaxSubmit()还挺好用,而且比单独上传图片更简单。
在此贴上代码实现:
js:
$("#ok").click(function() {
$("#gp").ajaxSubmit({
url : "xxx.action?action=saveOrUpdateObject",
type : "post",
dataType : 'json',
success : function(data) {
alert("设置成功!");
},
error : function(data) {
alert("error:" + data.responseText);
}
});
});
大概jsp代码:
<form id="gp" method="post" enctype="multipart/form-data"> <input type="text" name="" id="" /> <input type="file" name="" id="" accept="image/*"/> <input type="button" id="ok" value="保存" /> </form>
相关文章推荐
- Ajax
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 解决Ajax悬停效果,无法遮蔽FLASH的问题
- 再谈Jquery Ajax方法传递到action(补充)
- Dom在ajax技术中的作用说明
- 使用Ajax实时检测"用户名、邮箱等"是否已经存在
- 探讨Ajax中同步与异步之间的区别
- ajax中data传参的两种方式分析
- 原生AJAX写法实例分析
- 探秘ajax跨域请求
- JQuery ajax返回JSON时的处理方式 (三种方式)
- Ajax中浏览器和服务器交互详解
- ajax实现点击不同的链接让返回的内容显示在特定div里
- ajax 动态传递jsp等页面使用id辨识传递对象
- ajax与传统web开发的异同点
- AJAX简单应用实例-弹出层
- AJAX初级教程之初识AJAX
- Ajax无刷新分页的性能优化方法
- jquery对ajax的支持介绍