ajax异步提交含有文件的表单
来源:互联网 发布:查看linux用户密码 编辑:程序博客网 时间:2024/06/05 03:55
这几天一直在纠结这个,之前用的ajaxSubmit()提交表单如果有文件在的话就不行了,找到了一下的方法:
按我的理解就是把form的内容转给了iframe去提交,所以当前的form是不会刷新变化的,当然如果有返回数据的话也是写到iframe里头。
WEB 2.0 的时代之所以不同,是因为大量的在页面当中使用了 ajax 使得单一页面对于用户做到无刷新的友好交互。但是一旦页面牵扯到文件上传就出现了一些问题,大家知道因为使用文件上传的话,是不能够直接通过 ajax 的方式来把文件当做参数传递给后台的,必须要通过 form 表单的形式来进行提交,from 和 ajax 本身就是对立的。在这里貌似是没有办法解决文件的 ajax 异步上传问题了,但是我们可以通过小技巧来模拟出文件的 ajax 异步提交的实现,保证页面不刷新的情况下做出文件的上传效果。
实现技术
语言:JAVA
架构:STRUTS2
页面js库支持:jquery-1.7.2
实现原理
使用传统的 ajax 提交方式肯定是不行的,所以这里就要稍微变通一下。在文件上传页面嵌入 iframe 将 iframe 的内嵌页面当做是文件提交后返回的页面。在本页面通过 iframe 页面的 onload 方法对 iframe 页面进行监听,上传成功后 irame 页面会触发 onload 方法,本页面就会捕捉到上传成功的事件,再进行返回值的获取操作。便模拟实现了 ajax 异步文件提交。
页面代码
01
<%@ page language="java" contentType="text/html; charset=UTF-8"
02
03
pageEncoding="UTF-8"%>
04
05
<%@ include file="/common/taglibs.jsp"%>
06
07
<%@ taglib prefix="sesan" uri="/sesan"%>
08
09
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
10
11
<
html
>
12
13
<
head
>
14
15
<
title
>ajax异步上传文件实现</
title
>
16
17
18
19
<
link
type
=
"text/css"
rel
=
"stylesheet"
href
=
"${ctx }/css/main.css"
/>
20
21
<
link
href
=
"${ctx }/css/sesan-portal.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
22
23
<
script
type
=
"text/javascript"
src
=
"${ctx }/js/jquery-1.7.2.min.js"
></
script
>
24
25
<
style
type
=
"text/css"
>
26
27
#file_upload_return{display:none;width:0;height:0;}
28
29
#file_upload_return_img{width:1200px;margin:0 auto;}
30
31
#file_upload_return_img img{float:left;width:300px;height:300px;}
32
33
</
style
>
34
35
<
script
type
=
"text/javascript"
>
36
37
$(document).ready(function(){
38
39
//选择文件成功则提交表单
40
41
$("#upload_file").change(function(){
42
43
if($("#upload_file").val() != '') $("#file_form").submit();
44
45
});
46
47
//iframe加载响应,初始页面时也有一次,此时data为null。
48
49
$("#file_upload_return").load(function(){
50
51
var data = $(window.frames['file_upload_return'].document.body).find("font").html();
52
53
//若iframe携带返回数据,则显示在file_upload_return_img中
54
55
if(data != null){
56
57
$("#file_upload_return_img").append(data.replace(/</g,'<').replace(/>/g,'>'));
58
59
$("#upload_file").val('');
60
61
}
62
63
});
64
65
});
66
67
</
script
>
68
69
</
head
>
70
71
<
body
>
72
73
<
form
id
=
"file_form"
method
=
"post"
action
=
"${ctx}/uploadImage/upload_util!uploadFile.do"
74
75
target
=
"file_upload_return"
enctype
=
"multipart/form-data"
>
76
77
<
input
type
=
"file"
name
=
"fileupload"
id
=
"upload_file"
>
<!-- 添加上传文件 -->
78
79
</
form
>
80
81
<
iframe
id
=
"file_upload_return"
name
=
"file_upload_return"
></
iframe
>
<!-- 提交表单处理iframe框架 -->
82
83
<
div
id
=
"file_upload_return_img"
></
div
>
<!-- 响应返回数据容器 -->
84
85
</
body
>
86
87
</
html
>
后台代码
后台具体怎么操作的不重要,关键是回写,当文件上传完毕之后后台调用回写向目标页面进行回写,便会造成 iframe 的重新刷新。下面就是回写代码。
out = response.getWriter();
out.print(“<font>文件上传成功</font>”);
转载自http://www.open-open.com/lib/view/open1358900666802.html
- ajax异步提交含有文件的表单
- 通过Ajax方式提交含有文件的表单
- Ajax提交含有文件type='file'标签的表单
- AJAX异步提交表单
- ajax异步提交表单
- Ajax异步提交表单
- ajax异步提交表单
- ajax异步提交表单
- ajax异步提交表单。
- ajax异步提交表单
- 用jquery.form.js 实现ajax提交含有上传文件和普通字段的表单
- html5里使用ajax提交含有上传文件的form表单
- ajax实现表单的异步提交
- Struts2的Ajax表单异步方式提交表单请求
- ajax 异步提交 struts2 表单
- ajax 异步提交form表单
- ajax 异步提交form 表单
- AJAX异步提交form表单
- 序列化Demo
- 回家?
- hdu-1285 确定比赛名次
- How to Install Oracle 12C Enterprise Edition Database Ubuntu 13.10
- 快速入门C++ 07(构造器和析构器)
- ajax异步提交含有文件的表单
- 实验室基础信息系统
- 静态变量基础
- iOS 基础小结之常用控件三
- QTP退出函数
- Loadrunner中Socket协议接收定长和不定长的内容
- C语言链表各类操作详解
- 乱码java.io.CharConversionException: isHexDigit
- al11 写数据到SAP