异步上传文件

 

相关文章:  

• Shoes - 构建Ruby客户端程序的小工具
• 上传下载组件SmartUpload使用方法
• ext2.0如何做文件上传？

推荐圈子: EXT
更多相关推荐

<script type="text/javascript"></script> 实现主要功能：

• 页面提供一个上传图片的input file选择框，用于上传某一类型的数张图片
• 每次选择完本地图片后，图片便异步存储到后台的文件夹中；
• 并将路径信息存储到数据库中；
• 页面上显示此图的缩略图，并在旁边显示一个删除标记，当点击时，将此图片从页面、数据库、后台的文件夹中删除
• input file选择框清空，再点击用于上传下一张图片；

JSP页面编写如下：

Html代码

1. <div>  
2.     <form action="uploadWaiguanImage.do" id="waiguan_form" name="waiguan_form"    
3.           enctype="multipart/form-data" method="post" target="waiguan_hidden_frame">  
4.         <span>  
5.             <label>外观图</label>  
6.             <img src="images/addImage.JPG">  
7.             <input type="file" id="waiguan_add" name="waiguan_add"/>  
8.         </span>  
9.         <iframe name="waiguan_hidden_frame" id="waiguan_hidden_frame" style="display:none"></iframe>  
10.         <c:forEach var="x" begin="1" end="3" step="1">  
11.             <span>  
12.                 <img id="waiguan_image${x }" style="visibility:hidden" src="" width="100" alt="外观图${x }"/>  
13.                 <img id="waiguan_delete_image${x }" style="visibility:hidden;cursor: pointer" src="images/deleteImage.JPG"/>  
14.             </span>  
15.         </c:forEach>  
16.     </form>                          
17. </div>  

<div>
	<form action="uploadWaiguanImage.do" id="waiguan_form" name="waiguan_form" 
          enctype="multipart/form-data" method="post" target="waiguan_hidden_frame">
    	<span>
    		<label>外观图</label>
    		<img src="images/addImage.JPG">
    		<input type="file" id="waiguan_add" name="waiguan_add"/>
    	</span>
    	<iframe name="waiguan_hidden_frame" id="waiguan_hidden_frame" style="display:none"></iframe>
    	<c:forEach var="x" begin="1" end="3" step="1">
    		<span>
    			<img id="waiguan_image${x }" style="visibility:hidden" src="" width="100" alt="外观图${x }"/>
    			<img id="waiguan_delete_image${x }" style="visibility:hidden;cursor: pointer" src="images/deleteImage.JPG"/>
    		</span>
    	</c:forEach>
    </form>   					
</div>

让form的target值为iframe，当form提交的时候，是异步iframe进行提交，不会影响页面的其他部分。
c:forEach部分是首先隐藏了上传后显示的图片标签和删除标签（这里最大可以上传三张）

相应的JS代码：采用的是JQuery写的，不过写的很啰嗦，有点像是原始JS操作

Js代码

1. /**  
2.  * 页面加载时完成操作  
3.  */  
4. $(document).ready(function() {   
5. // 设置上传外观图   
6.     $("#waiguan_add").bind("change", function() {   
7.         submitImage("waiguan", 3);   
8.     });   
9. }   
10.   
11. /**  
12.  * 上传图片  
13.  *   
14.  * @param {}  
15.  *            para_name 图片所属属性名  
16.  * @param {}  
17.  *            number 此类图片的总数量  
18.  */  
19. function submitImage(para_name, number) {   
20.     var para_form = para_name + "_form";   
21.     var para_image = para_name + "_image";   
22.   
23.     // alert(para_image);   
24.   
25.     for (var i = 1; i <= number; i++) {   
26.         var srcValue = $("#" + para_image + i).attr("src");   
27.         // alert(srcValue);   
28.         // alert(srcValue.length);   
29.         if (srcValue == "" || srcValue.length == 0) {   
30.             // alert("break");   
31.             break;   
32.         }   
33.     }   
34.   
35.     if (i > number) {   
36.         alert("已超过了此类图的上传最大限");   
37.         // 重置上传按钮，使之为空   
38.         resetUploadBotton(para_name + "_add");   
39.     } else {   
40.   
41.         $("#" + para_form).submit();   
42.     }   
43. }   
44.   
45. /**  
46.  * iframe上传外观图片的返回操作  
47.  *   
48.  * @param {}  
49.  *            msg 返回的图片所在地址  
50.  */  
51. function callbackWaiguan(msg) {   
52.   
53.     if (msg != "error") {   
54.         for (var i = 1; i <= 3; i++) {   
55.             var srcValue = $("#waiguan_image" + i).attr("src");   
56.             // alert(srcValue);   
57.             if (srcValue == "" || srcValue.length == 0) {   
58.                 $("#waiguan_image" + i).attr("src", msg);   
59.                 $("#waiguan_image" + i).css("visibility", "visible");   
60.                 $("#waiguan_delete_image" + i).css("visibility", "visible");   
61.                 $("#waiguan_delete_image" + i).click(function() {   
62.   
63.                     deleteImage("waiguan", i);   
64.   
65.                 });   
66.                 break;   
67.             }   
68.         }   
69.     } else {   
70.         alert("上传图片失败，后台程序出现问题！");   
71.     }   
72.   
73.     // 重置上传按钮，使之为空   
74.     resetUploadBotton("waiguan_add");   
75. }   
76.   
77. /**  
78.  * 删除某个图片时的异步操作  
79.  *   
80.  * @param {}  
81.  *            para_name  
82.  * @param {}  
83.  *            number  
84.  */  
85. function deleteImage(para_name, number) {   
86.     var delete_image_id = para_name + "_image" + number;   
87.     var imagePathName = $("#" + delete_image_id).attr("src");   
88.        
89.     if (para_name == "waiguan") {   
90.   
91.         $.get("deleteWaiguanImage.do", {   
92.             deleteFile : imagePathName,   
93.             t : Math.random()   
94.         }, function(tag) {   
95.   
96.             alert(tag);   
97.             if (tag == "true") {   
98.                 $("#" + delete_image_id).attr("src", "");   
99.                 $("#" + delete_image_id).css("visibility", "hidden");   
100.                 $("#" + para_name + "_delete_image" + number).css("visibility",   
101.                         "hidden");   
102.             } else {   
103.                 alert("连接数据库失败，无法删除该图片!");   
104.             }   
105.         });   
106.     }   
107. }   
108.   
109. /**  
110.  * 重置上传按钮，使之为空  
111.  *   
112.  * @param {}  
113.  *            para_name_add  
114.  */  
115. function resetUploadBotton(para_name_add) {   
116.     var form = document.createElement("form");   
117.     var span = document.createElement("span");   
118.     var para_image_file = document.getElementById(para_name_add);   
119.     para_image_file.parentNode.insertBefore(span, para_image_file);   
120.     form.appendChild(para_image_file);   
121.     form.reset();   
122.     span.parentNode.insertBefore(para_image_file, span);   
123.     span.parentNode.removeChild(span);   
124.     form.parentNode.removeChild(form);   
125.   
126. }  

/**
 * 页面加载时完成操作
 */
$(document).ready(function() {
// 设置上传外观图
	$("#waiguan_add").bind("change", function() {
		submitImage("waiguan", 3);
	});
}

/**
 * 上传图片
 * 
 * @param {}
 *            para_name 图片所属属性名
 * @param {}
 *            number 此类图片的总数量
 */
function submitImage(para_name, number) {
	var para_form = para_name + "_form";
	var para_image = para_name + "_image";

	// alert(para_image);

	for (var i = 1; i <= number; i++) {
		var srcValue = $("#" + para_image + i).attr("src");
		// alert(srcValue);
		// alert(srcValue.length);
		if (srcValue == "" || srcValue.length == 0) {
			// alert("break");
			break;
		}
	}

	if (i > number) {
		alert("已超过了此类图的上传最大限");
		// 重置上传按钮，使之为空
		resetUploadBotton(para_name + "_add");
	} else {

		$("#" + para_form).submit();
	}
}

/**
 * iframe上传外观图片的返回操作
 * 
 * @param {}
 *            msg 返回的图片所在地址
 */
function callbackWaiguan(msg) {

	if (msg != "error") {
		for (var i = 1; i <= 3; i++) {
			var srcValue = $("#waiguan_image" + i).attr("src");
			// alert(srcValue);
			if (srcValue == "" || srcValue.length == 0) {
				$("#waiguan_image" + i).attr("src", msg);
				$("#waiguan_image" + i).css("visibility", "visible");
				$("#waiguan_delete_image" + i).css("visibility", "visible");
				$("#waiguan_delete_image" + i).click(function() {

					deleteImage("waiguan", i);

				});
				break;
			}
		}
	} else {
		alert("上传图片失败，后台程序出现问题！");
	}

	// 重置上传按钮，使之为空
	resetUploadBotton("waiguan_add");
}

/**
 * 删除某个图片时的异步操作
 * 
 * @param {}
 *            para_name
 * @param {}
 *            number
 */
function deleteImage(para_name, number) {
	var delete_image_id = para_name + "_image" + number;
	var imagePathName = $("#" + delete_image_id).attr("src");
	
	if (para_name == "waiguan") {

		$.get("deleteWaiguanImage.do", {
			deleteFile : imagePathName,
			t : Math.random()
		}, function(tag) {

			alert(tag);
			if (tag == "true") {
				$("#" + delete_image_id).attr("src", "");
				$("#" + delete_image_id).css("visibility", "hidden");
				$("#" + para_name + "_delete_image" + number).css("visibility",
						"hidden");
			} else {
				alert("连接数据库失败，无法删除该图片!");
			}
		});
	}
}

/**
 * 重置上传按钮，使之为空
 * 
 * @param {}
 *            para_name_add
 */
function resetUploadBotton(para_name_add) {
	var form = document.createElement("form");
	var span = document.createElement("span");
	var para_image_file = document.getElementById(para_name_add);
	para_image_file.parentNode.insertBefore(span, para_image_file);
	form.appendChild(para_image_file);
	form.reset();
	span.parentNode.insertBefore(para_image_file, span);
	span.parentNode.removeChild(span);
	form.parentNode.removeChild(form);

}

上传图片采用的是定义的form的submit()提交，iframe的异步提交。
返回操作将image的src的值，置为刚upload的图片在webroot中的位置，这样就能显示图片了。
删除图片时，利用Ajax将要删除的图片路径发送到后台，进行删除，删除成功时，将页面html中image的src值置为空。

后台处理的方法如下：

Java代码

1. /**  
2.      * 初始化SmartUpload类，用于上传文件  
3.      *   
4.      * @param servlet  
5.      * @return SmartUpload  
6.      * @throws ServletException  
7.      * @throws IOException  
8.      * @throws SQLException  
9.      */  
10.     public SmartUpload initSmartUpload(ActionServlet servlet)   
11.             throws ServletException, IOException, SQLException {   
12.         // 新建一个SmartUpload对象   
13.         SmartUpload su = new SmartUpload();   
14.   
15.         javax.servlet.jsp.PageContext pageContext = JspFactory   
16.                 .getDefaultFactory().getPageContext(servlet, request, response,   
17.                         null, true, 8192, true);   
18.         // 上传初始化   
19.         su.initialize(pageContext);   
20.   
21.         // 设定上传限制   
22.         // 1.限制每个上传文件的最大长度。   
23.         su.setMaxFileSize(10000000);   
24.   
25.         // 2.限制总上传数据的长度。   
26.         su.setTotalMaxFileSize(20000000);   
27.   
28.         // 3.设定允许上传的文件   
29.         su.setAllowedFilesList("jpg,gif,bmp,pcx,"  
30.                 + "tiff,jpeg,tga,exif,fpx,cad");   
31.   
32.         // 4.设定禁止上传的文件   
33.         su.setDeniedFilesList("exe,bat,jsp,htm,html");   
34.   
35.         return su;   
36.     }   
37.   
38.   
39. /**  
40.      * 异步上传外观图  
41.      *   
42.      * @param mapping  
43.      * @param form  
44.      * @param request  
45.      * @param response  
46.      * @return  
47.      * @throws Exception  
48.      */  
49.     public ActionForward uploadWaiguanImage(ActionMapping mapping,   
50.             ActionForm form, HttpServletRequest request,   
51.             HttpServletResponse response) throws Exception {   
52.   
53.         SeriesService seriesService = ServiceFactory.getSeriesService(request,   
54.                 response);   
55.   
56.         String filePathName = null;   
57.   
58.         boolean tag= true;   
59.         try {   
60.             //初始化SmartUpload对象   
61.             SmartUpload su = seriesService.initSmartUpload(this.getServlet());   
62.             //上传外观图，将文件存储在filePath中，遍历系列对象的外观图属性，将图片的位置存储在某一空的属性中    
63.             filePathName = "upload/" + seriesService.addWaiguanImage(su);   
64.   
65.         } catch (Exception e) {   
66.             e.printStackTrace();   
67.             tag = false;   
68.         }   
69.   
70.         PrintWriter out = response.getWriter();   
71.         if (tag == true) {   
72.             out.println("<script>parent.callbackWaiguan('" + filePathName   
73.                     + "')</script>");   
74.         } else {   
75.             out.println("<script>parent.callbackWaiguan('error')</script>");   
76.         }   
77.   
78.         return null;   
79.     }   
80.   
81. /**  
82.      * 异步删除某个外观图  
83.      *   
84.      * @param mapping  
85.      * @param form  
86.      * @param request  
87.      * @param response  
88.      * @return  
89.      * @throws Exception  
90.      */  
91.     public ActionForward deleteWaiguanImage(ActionMapping mapping,   
92.             ActionForm form, HttpServletRequest request,   
93.             HttpServletResponse response) throws Exception {   
94.         Integer seriesID = (Integer) request.getSession().getAttribute(   
95.                 "seriesID");   
96.         String filePathName = (String) request.getParameter("deleteFile");   
97.   
98.         SeriesService seriesService = ServiceFactory.getSeriesService(request,   
99.                 response);   
100.         boolean tag = true;   
101.         try {   
102.             //从数据库中和文件路径中删除外观图   
103.             tag = seriesService.deleteWaiguanImage(filePathName, seriesID);   
104.         } catch (Exception e) {   
105.             e.printStackTrace();   
106.             tag = false;   
107.         }   
108.   
109.         PrintWriter out = response.getWriter();   
110.   
111.         out.write(new Boolean(tag).toString());   
112.   
113.         return null;   
114.     }