form、iframe实现异步上传文件

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

/*** 页面加载时完成操作*/
$(document).ready(function() {
// 设置上传外观图$("#waiguan_add").bind("change", function() {submitImage("waiguan", 3);});
}/*** 上传图片* * &＃64;param {}* para_name 图片所属属性名* &＃64;param {}* number 此类图片的总数量*/
function submitImage(para_name, number) {var para_form &＃61; para_name &＃43; "_form";var para_image &＃61; para_name &＃43; "_image";// alert(para_image);for (var i &＃61; 1; i <&＃61; number; i&＃43;&＃43;) {var srcValue &＃61; $("#" &＃43; para_image &＃43; i).attr("src");// alert(srcValue);// alert(srcValue.length);if (srcValue &＃61;&＃61; "" || srcValue.length &＃61;&＃61; 0) {// alert("break");break;}}if (i > number) {alert("已超过了此类图的上传最大限");// 重置上传按钮&＃xff0c;使之为空resetUploadBotton(para_name &＃43; "_add");} else {$("#" &＃43; para_form).submit();}
}/*** iframe上传外观图片的返回操作* * &＃64;param {}* msg 返回的图片所在地址*/
function callbackWaiguan(msg) {if (msg !&＃61; "error") {for (var i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;) {var srcValue &＃61; $("#waiguan_image" &＃43; i).attr("src");// alert(srcValue);if (srcValue &＃61;&＃61; "" || srcValue.length &＃61;&＃61; 0) {$("#waiguan_image" &＃43; i).attr("src", msg);$("#waiguan_image" &＃43; i).css("visibility", "visible");$("#waiguan_delete_image" &＃43; i).css("visibility", "visible");$("#waiguan_delete_image" &＃43; i).click(function() {deleteImage("waiguan", i);});break;}}} else {alert("上传图片失败&＃xff0c;后台程序出现问题&＃xff01;");}// 重置上传按钮&＃xff0c;使之为空resetUploadBotton("waiguan_add");
}/*** 删除某个图片时的异步操作* * &＃64;param {}* para_name* &＃64;param {}* number*/
function deleteImage(para_name, number) {var delete_image_id &＃61; para_name &＃43; "_image" &＃43; number;var imagePathName &＃61; $("#" &＃43; delete_image_id).attr("src");if (para_name &＃61;&＃61; "waiguan") {$.get("deleteWaiguanImage.do", {deleteFile : imagePathName,t : Math.random()}, function(tag) {alert(tag);if (tag &＃61;&＃61; "true") {$("#" &＃43; delete_image_id).attr("src", "");$("#" &＃43; delete_image_id).css("visibility", "hidden");$("#" &＃43; para_name &＃43; "_delete_image" &＃43; number).css("visibility","hidden");} else {alert("连接数据库失败&＃xff0c;无法删除该图片!");}});}
}/*** 重置上传按钮&＃xff0c;使之为空* * &＃64;param {}* para_name_add*/
function resetUploadBotton(para_name_add) {var form &＃61; document.createElement("form");var span &＃61; document.createElement("span");var para_image_file &＃61; 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);}

/*** 初始化SmartUpload类&＃xff0c;用于上传文件* * &＃64;param servlet* &＃64;return SmartUpload* &＃64;throws ServletException* &＃64;throws IOException* &＃64;throws SQLException*/public SmartUpload initSmartUpload(ActionServlet servlet)throws ServletException, IOException, SQLException {// 新建一个SmartUpload对象SmartUpload su &＃61; new SmartUpload();javax.servlet.jsp.PageContext pageContext &＃61; 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,"&＃43; "tiff,jpeg,tga,exif,fpx,cad");// 4.设定禁止上传的文件su.setDeniedFilesList("exe,bat,jsp,htm,html");return su;}/*** 异步上传外观图* * &＃64;param mapping* &＃64;param form* &＃64;param request* &＃64;param response* &＃64;return* &＃64;throws Exception*/public ActionForward uploadWaiguanImage(ActionMapping mapping,ActionForm form, HttpServletRequest request,HttpServletResponse response) throws Exception {SeriesService seriesService &＃61; ServiceFactory.getSeriesService(request,response);String filePathName &＃61; null;boolean tag&＃61; true;try {//初始化SmartUpload对象SmartUpload su &＃61; seriesService.initSmartUpload(this.getServlet());//上传外观图&＃xff0c;将文件存储在filePath中&＃xff0c;遍历系列对象的外观图属性&＃xff0c;将图片的位置存储在某一空的属性中 filePathName &＃61; "upload/" &＃43; seriesService.addWaiguanImage(su);} catch (Exception e) {e.printStackTrace();tag &＃61; false;}PrintWriter out &＃61; response.getWriter();if (tag &＃61;&＃61; true) {out.println("");} else {out.println("");}return null;}/*** 异步删除某个外观图* * &＃64;param mapping* &＃64;param form* &＃64;param request* &＃64;param response* &＃64;return* &＃64;throws Exception*/public ActionForward deleteWaiguanImage(ActionMapping mapping,ActionForm form, HttpServletRequest request,HttpServletResponse response) throws Exception {Integer seriesID &＃61; (Integer) request.getSession().getAttribute("seriesID");String filePathName &＃61; (String) request.getParameter("deleteFile");SeriesService seriesService &＃61; ServiceFactory.getSeriesService(request,response);boolean tag &＃61; true;try {//从数据库中和文件路径中删除外观图tag &＃61; seriesService.deleteWaiguanImage(filePathName, seriesID);} catch (Exception e) {e.printStackTrace();tag &＃61; false;}PrintWriter out &＃61; response.getWriter();out.write(new Boolean(tag).toString());return null;}