ajax提交表单、ajax实现文件上传
ajax提交表单、ajax实现文件上传，有需要的朋友可以参考下。
方式一：利用from表单的targer属性 + 隐藏的iframe 达到类似效果， 支持提交含有文件和普通数据的复杂表单
方式二：使用jquery的$.ajax({..})， 支持提交普通表单，但不支持含有文件的复杂表单; ($.post 或 $.get底层用的都是$.ajax)
方式三：使用jquery插件ajaxFileUpload.js， 支持上传文件，但不支持提交表单
方式四：使用jquery.from.js，支持提交同时含有文件和普通数据的复杂表单
个人四种都用过, 更好喜欢第二种和第四种; 用第二种来解决ajax普通请求, 用第四种来解决文件上传/表单提交; 不多说,上代码
方式一: from + iframe
Test1.jsp：表单、iframe、提交表单
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面1,创建表单、iframe、提交表单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.1.8.2.min.js"></script>
<script>
$(function(){
//值得注意的是iframe会维护浏览器的历史,浏览器的后退/前进将根据ifream的访问历史来变化,而非主页面
$("#btn").click(function(){
var value = $("#pic").val();
if(Utils.isEmpty(value)){
alert("请选择文件");
return false;
}
if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
alert("文件格式错误");
return false;
}
$("#form0").submit();
});
});
</script>
</head> <body>
<form id="form0" method="post" action="..省略/uploadOrgPic.html" enctype="multipart/form-data" target="hiddenFrame" >
上传头像: <input type="file" name="imageVo.image" id="pic" />
<input type="button" value="提交" id="btn"/>
</form>
<div id="result"></div> <iframe src="about:bland;" id="hiddenFrame" name="hiddenFrame" style="display:none;" frameborder="0"></iframe>
</body>
</html>
Test2.jsp：后台处理完成后的跳转页面 (后台处理代码此处就不贴了, 上传文件相信大家都会的)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>测试页面2，处理结果、返回父页面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script>
window.onload = function(){
if(window.parent != window){ //检查是否存在父窗口
var resultDiv= window.parent.document.getElementById("result");
resultDiv.innerHTML = '因为是测试,所以简单的来这么一句话';
}
}
</script>
</head> <body>
</body>
</html>
方式二:$.ajax({..})
值得注意的是: serialize()可通过序列化表单值,创建URL编码文本字符串,但不支持文件上传的表单
$.ajax({
url:你要请求的url链接, //默认为当前页面url
aysnc:true, //是否异步,默认true
cache: true, //使用缓存,默认true
type: "POST", //请求方式,默认Get
dataType:'JSON', //预期服务器返回的数据类型 (若不指定jquery将根据HTTP包MIME信息来判断)
headers:{'ClientCallMode':'ajax'}, //添加头部,也可通过beforeSend函数添加
data:$('#formid').serialize(), //要发送的数据,将自动转换为请求字符串格式。 此处为表单序列化后生成的字符串
success: function(data) { //执行成功的回调函数
alert("success");
},
error: function(request) { //执行错误的回调函数(包含三个参数:XMLHttrRequest、错误信息、捕获的异常对象)
alert("error");
}
});
方式三:使用jquery插件ajaxFileUpload.js，该方式提交时无需表单, 也提交不了表单, 只用于文件上传
若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多, 则不建议使用这种方式, 个人更倾向于方式四
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxFileUpload上传文件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="..省略/jquery.js"></script>
<script type="text/javascript" src="..省略/ajaxfileupload.js"></script>
<script>
$("#uploadFile").click(function(){
var value = $("#imageInput").val();
if(Utils.isEmpty(value)){
alert("请选择文件");
return false;
}
if(!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)){
alert("文件格式错误");
return false;
} $.ajaxFileUpload({
url:'url',
secureuri:false, //是否启用安全提交,默认false
dataType:'JSON', //预期服务器返回的数据类型
fileElementId:'imageInput', //文件域id值
data:{'name':'abc'}, //其它参数
success:function(data,status){
alert(data);
},
error:function(data,status,_exception){
alert(_exception);
}
});
});
</script>
</head> <body>
姓名: <input type="text" name="name"/><br/>
上传头像: <input type="file" id="imageInput" name="imageVo.image"/>
<input type="button" value="上传" id="uploadFile"/>
</body>
</html>
方式四：jquery.form.js
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax上传头像</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="jquery.1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
</head> <body>
<!-- 包含文件和普通数据的表单 -->
<form id="form0" method="post" action="" enctype="multipart/form-data">
姓名: <input type="text" name="userInfo.userName" autocomplete="off"/>
头像: <input type="file" name="imageVo.image" id="pic" />
<input type="button" value="提交" onclick="ajaxSubmitForm();"/>
</form>
</body>
<script>
function ajaxSubmitForm() {
var value = $("#pic").val();
if (Utils.isEmpty(value)) {
alert("请先选择文件");
return false;
}
if (!value.match(/.jpg|.jpeg|.gif|.png|.bmp/i)) {
alert("文件格式错误");
return false;
}
var option = {
url : '..省略/uploadOrgPic.ac',
type : 'POST',
dataType : 'json',
headers : {"ClientCallMode" : "ajax"}, //添加请求头部
success : function(data) {
alert(JSON.stringify(data));
},
error: function(data) {
alert(JSON.stringify(data) + "--上传失败,请刷新后重试");
}
};
$("#form0").ajaxSubmit(option);
return false; //最好返回false，因为如果按钮类型是submit,则表单自己又会提交一次;返回false阻止表单再次提交
}
</script>
</html>
ajax提交表单、ajax实现文件上传的更多相关文章
- Ajax 提交表单【包括文件上传】
利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></ ...
- JavaScript实现form表单的多文件上传
form表单的多文件上传,具体内容如下 formData对象可以使用一系列的键值对来模拟一个完整的表单,然后使用Ajax来发送这个表单 使用<form>表单初始化FormData对象的方式 ...
- 【ASP.NET Web API教程】5.3 发送HTML表单数据：文件上传与多部分MIME
原文:[ASP.NET Web API教程]5.3 发送HTML表单数据:文件上传与多部分MIME 注:本文是[ASP.NET Web API系列教程]的一部分,如果您是第一次看本系列教程,请先看前面 ...
- 通过jQuery Ajax提交表单数据时同时上传附件
1.使用场景:需要使用ajax提交表单,但是提交的表单里含有附件上传 2.代码实现方式: <!-- HTML代码 --> <form method="post" ...
- 基于hi-nginx的web开发（python篇）——表单处理和文件上传
hi-nginx会自动处理表单,所以,在hi.py框架里,要做的就是直接使用这些数据. 表单数据一般用GET和POST方法提交.hi-nginx会把这些数据解析出来,放在form成员变量里.对pyth ...
- (27) java web的struts2框架的使用-基于表单的多文件上传
和单个文件上传配置都是一样的,只是在action中接受参数时候,接受的是数组,不再是单个的文件. 一,action的实现: public class MutableFilesUpload extend ...
- form表单系列中文件上传及预览
文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...
- (转)WebApi发送HTML表单数据：文件上传与多部分MIME
5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...
- WebApi发送HTML表单数据：文件上传与多部分MIME
5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...
- 学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载
输入校验是 Web 开发任务之一,在 SpringMVC 中有两种方式可以实现,分别是使用 Spring 自带的验证 框架和使用 JSR 303 实现, 也称之为 spring-validator 和 ...
随机推荐
- toString 方法在数组中的使用
对于一个一维数组,他在转换成字符串的时候应该调用Arrays.toString(); 对于一个多维数组,他在转换成字符串的时候应该调用Arrays.deepToString(); 实例: packag ...
- MySQL 之 视图、触发器、存储过程、函数、事物与数据库锁
浏览目录: 1.视图 2.触发器 3.存储过程 4.函数 5.事物 6.数据库锁 7.数据库备份 1.视图 视图:是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据 视 ...
- HDU - 1789 贪心
贪心策略:按照分数降序排列,如果分数相同将截止时间早的排在前面.每次让作业尽量晚完成,因此需要逆序枚举判断这一天是否已经做了其他作业,如果没时间做这个作业说明不能完成,否则将这一天标记. AC代码 # ...
- Storm业务功能
监控平台当前使用storm对日志进行流式分析计算,用于支撑监控数据清洗,后来逐渐在storm上搭建起数据在线关联,数据离线关联,明细数据清洗,日志搜索等功能,本章节对各功能进行简要概述. 对storm ...
- Hadoop分布式集群配置
硬件环境: 安装一个Hadoop集群时,需要专门指定一个服务器作为主节点. 三台虚拟机搭建的集群:(搭建集群时主机名不能一样,主机名在/etc/hostname修改) master机器:集群的主节点, ...
- eclipse hadoop1.2.0配置及wordcount运行
"error: failure to login"问题 http://www.cnblogs.com/xia520pi/archive/2012/05/20/2510723.htm ...
- 遍历对象属性(for in、Object.keys、Object.getOwnProperty)
js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...
- linux Nagios监控
监控目标 监控目标主机分为四个部分 硬件资源 操作系统 数据库 应用软件 监控目的: 进行服务器性能调整前,知道调整什么,系统瓶颈在什么地方 被一部分必须同时监控,内容包括吞吐量,反应时间,使用率等 ...
- 嵌入式Linux引导过程之1.3——Xloader的sys_init
上一篇文章对XLOADER_ENTRY进行了分析,看到其中调用的第一个标号就是sys_init,本文就对这个标号对应的代码段进行粗略的分析,这里我也还有好多没有搞明白的,就先留着,日后慢慢明白,先把自 ...
- freemarker写select组件报错总结（三）
1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...