ajax(三) ajax提交表单、ajax实现文件上传
2015-08-19 19:18
656 查看
式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单
方式二:使用jquery的.ajax(..),支持提交普通表单,但不支持含有文件的复杂表单;(.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; (.post 或 .get底层用的都是.get底层用的都是.ajax)
方式三:使用jquery插件ajaxFileUpload.js, 支持上传文件,但不支持提交表单
方式四:使用jquery.from.js, 支持提交同时含有文件和普通数据的复杂表单
个人四种都用过, 更好喜欢第二种和第四种; 用第二种来解决ajax普通请求, 用第四种来解决文件上传/表单提交; 不多说,上代码
方式一: from + iframe
Test1.jsp:表单、iframe、提交表单
Test2.jsp:后台处理完成后的跳转页面 (后台处理代码此处就不贴了, 上传文件相信大家都会的)
方式二:$.ajax({..})
值得注意的是: serialize() 可通过序列化表单值,创建URL编码文本字符串,但不支持文件上传的表单
方式三:使用jquery插件ajaxFileUpload.js,该方式提交时无需表单, 也提交不了表单, 只用于文件上传
若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多, 则不建议使用这种方式, 个人更倾向于方式四
方式四:jquery.form.js
方式二:使用jquery的.ajax(..),支持提交普通表单,但不支持含有文件的复杂表单;(.ajax({..}), 支持提交普通表单,但不支持含有文件的复杂表单; (.post 或 .get底层用的都是.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编码文本字符串,但不支持文件上传的表单
<script> $.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"); } }); </script>
方式三:使用jquery插件ajaxFileUpload.js,该方式提交时无需表单, 也提交不了表单, 只用于文件上传
若在文件上传同时还要传递其它的参数,通过设置data属性即可实现; 但如果需要的参数过多, 则不建议使用这种方式, 个人更倾向于方式四
<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>
方式四:jquery.form.js
<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>
相关文章推荐
- 什么是进程
- 第十章 面向对象编程:继承和多态
- 题目:将整数A转换为B
- oracle游标:查询并打印员工的姓名和薪水
- iOS中Storyboard使用要点记录
- EF里Guid类型数据的自增长、时间戳和复杂类型的用法
- 题目:字符串查找
- NIO(JDK1.4)--选择器Selector
- 阿里云server安全设定
- 时间戳
- OC中nil、Nil、NULL、NSNull的区别
- android开发 解决启动页空白或黑屏问题
- iOS面试题三
- libcoubase源码解析
- 多线程
- webx turbine 前端开发入门理解
- 汇编中精妙的流程控制
- SQL
- Swift开发教程--如何给UITextView添加圆角边框
- 返享微信“卖”宝马,暴露朋友圈营销本质