iframe实现图片异步上传

实现主要功能：

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

JSP页面编写如下：

<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操作

/**
 * 页面加载时完成操作
 */
$(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值置为空。

后台处理的方法如下：

/**
	 * 初始化SmartUpload类，用于上传文件
	 * 
	 * @param servlet
	 * @return SmartUpload
	 * @throws ServletException
	 * @throws IOException
	 * @throws SQLException
	 */
	public SmartUpload initSmartUpload(ActionServlet servlet)
			throws ServletException, IOException, SQLException {
		// 新建一个SmartUpload对象
		SmartUpload su = new SmartUpload();

		javax.servlet.jsp.PageContext pageContext = JspFactory
				.getDefaultFactory().getPageContext(servlet, request, response,
						null, true, 8192, true);
		// 上传初始化
		su.initialize(pageContext);

		// 设定上传限制
		// 1.限制每个上传文件的最大长度。
		su.setMaxFileSize(10000000);

		// 2.限制总上传数据的长度。
		su.setTotalMaxFileSize(20000000);

		// 3.设定允许上传的文件
		su.setAllowedFilesList("jpg,gif,bmp,pcx,"
				+ "tiff,jpeg,tga,exif,fpx,cad");

		// 4.设定禁止上传的文件
		su.setDeniedFilesList("exe,bat,jsp,htm,html");

		return su;
	}


/**
	 * 异步上传外观图
	 * 
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	public ActionForward uploadWaiguanImage(ActionMapping mapping,
			ActionForm form, HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		SeriesService seriesService = ServiceFactory.getSeriesService(request,
				response);

		String filePathName = null;

		boolean tag= true;
		try {
			//初始化SmartUpload对象
			SmartUpload su = seriesService.initSmartUpload(this.getServlet());
			//上传外观图，将文件存储在filePath中，遍历系列对象的外观图属性，将图片的位置存储在某一空的属性中 
			filePathName = "upload/" + seriesService.addWaiguanImage(su);

		} catch (Exception e) {
			e.printStackTrace();
			tag = false;
		}

		PrintWriter out = response.getWriter();
		if (tag == true) {
			out.println("<script>parent.callbackWaiguan('" + filePathName
					+ "')</script>");
		} else {
			out.println("<script>parent.callbackWaiguan('error')</script>");
		}

		return null;
	}

/**
	 * 异步删除某个外观图
	 * 
	 * @param mapping
	 * @param form
	 * @param request
	 * @param response
	 * @return
	 * @throws Exception
	 */
	public ActionForward deleteWaiguanImage(ActionMapping mapping,
			ActionForm form, HttpServletRequest request,
			HttpServletResponse response) throws Exception {
		Integer seriesID = (Integer) request.getSession().getAttribute(
				"seriesID");
		String filePathName = (String) request.getParameter("deleteFile");

		SeriesService seriesService = ServiceFactory.getSeriesService(request,
				response);
		boolean tag = true;
		try {
			//从数据库中和文件路径中删除外观图
			tag = seriesService.deleteWaiguanImage(filePathName, seriesID);
		} catch (Exception e) {
			e.printStackTrace();
			tag = false;
		}

		PrintWriter out = response.getWriter();

		out.write(new Boolean(tag).toString());

		return null;
	}

这样，便完成了要实现的功能。

评论

10 楼 wyxy2005 2011-11-22  

ie下，$("#waiguan_add").bind("change"  这个的事件出发需要点from之外点击之后才开始上传。火狐是可以正常执行的，不理解为什么出现这个情况

9 楼 zjiaohuang 2010-01-21  

这里有一个用FancyUpload实现的demo，个人认为FancyUpload实现的上传简单实用。API同时也是十分详细

8 楼 sunrisetg 2010-01-20  

楼主能把 该实验的源码 上传看看吗？

7 楼 makemyownlife 2009-11-06  

wnzz95391511 写道

Army 写道

有人专门写过仿163网盘无刷新文件上传的，那个很详细，而且不依赖于库。

没有搜索到，倒是挺想看看的。
无刷新上传：主要的问题都是出在前台的操作上，后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。

仿163网盘无刷新文件上传确实有，你好好上网查查，写这篇文章的作者也写了很多其他的ajax方面的文章，从中获益良多，而且注释也很详细，上次我有了问题还向他请教了。

6 楼 willko 2009-11-05  

swfupload挺好的。
还能跨域

5 楼 liwenshui322 2009-11-05  

看不懂 

4 楼 wnzz95391511 2009-06-02  

Army 写道

有人专门写过仿163网盘无刷新文件上传的，那个很详细，而且不依赖于库。

没有搜索到，倒是挺想看看的。
无刷新上传：主要的问题都是出在前台的操作上，后台接收文件相对来说要好解决些的。
依赖库也主要是后台的操作。

3 楼 Army 2009-06-02  

有人专门写过仿163网盘无刷新文件上传的，那个很详细，而且不依赖于库。

2 楼 zgz888 2009-06-02  

好东西，谢谢了

1 楼 langhua9527 2009-05-27  

好东东，收藏一下，需的时候来看。。。我原来在一个项目里都准备做异步上传的，结果时间关系，就同步了。。。。