struts2实现多文件异步上传

xingguangsixian

浏览: 108230 次
性别:
来自: 郑州

最近访客更多访客>>

yuwei80

shuaige112500

太阳雨johnny

禾页gy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

struts2
jquery

strtuts2上传多文件上传异步上传 jquey.form.js兼容性

1.struts2本身不支持异步上传文件，需要相应的插件支持，这里用jquery.js和jquery.form.js来实现。

jquey.form.js版本： 3.42.0

jquey.js版本：1.7.2

刚开始用的jquery.form.js做上传时用的2012年的一个老版本，发现在ie,firefox,google兼容性方面很不好处理，换成这个最新的版本后还是可以处理的。

2.这里主要贴下异步上传的兼容性处理代码，其他的后端代码可以下载附件查看。

	response.reset();
			response.setContentType("text/html");
			pw = response.getWriter();
			pw.print("<textarea>"+jsonData.toString()+"</textarea>");

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上传页面</title>
<script type="text/javascript" src='<s:url value="/js/jquery-1.7.2.min.js"></s:url>'></script>
<script type="text/javascript" src='<s:url value="/js/jquery.form.js"></s:url>'></script>
<script type="text/javascript">
 
	function postFile() {
		$(document).ready(function() {
			var num=0;
			$("input[type=file]").each(function(i,n){
				if($(n).val() && $(n).val() != ''){
					num++;
					return false;
				}
			});
			
			if(num == 0){
				alert("请选择要上传的文件！");
				return;
			}
			
			
			$("#fileForm").ajaxSubmit({
				type : 'post',
				url : 'upload/fileupload!doMultiUpload',
				success : function(data) {
					if(data.success.length > 0){
						alert("『"+data.success.join()+"』上传成功！");
					}
					if(data.error.length > 0){
						alert("『"+data.error.join()+"』上传失败！");
					}
					$("#fileForm").resetForm();
				},
				error : function(xhr, ts, et){
					alert("上传失败，请检查文件类型和大小！");
				},
				dataFilter : function(data,type){
					if(!$.browser.msie && type === "json"){
						return data.replace("<textarea>","").replace("</textarea>","");
					}else{
						return $.parseJSON(data);
					}
				},
				dataType:'json'
			});
		});
	}
</script>
</head>
<body>
<s:form id="fileForm" name="fileForm"  enctype="multipart/form-data" method="post" > 

<%--  <s:file name="upload" label="上传文件"></s:file>  --%>
  <s:file id="multi1" name="multi" label="上传文件"></s:file> </br> 
  <s:file id="multi2" name="multi" label="上传文件"></s:file> </br> 
<%--   <s:submit value="提交"></s:submit>   --%>
<input type="button" value="提交" onclick="postFile()"/>
</s:form> 

</body>

这里主要是为了说明，用jquery做异步上传中的问题，其中代码是解决的方法。

3.为什么这样解决呢？

看下面：

在正常情况下，Firefox和google都可以使用而IE不可以使用，因为在IE中当java中response.setContentType("text/json"); 返回数据根本不走回调方法。

查看源代码发现:

因此就这java中返回数据时添加了<textarea></textarea>。