[b]实现主要功能:[/b]
[list]
[*]页面提供一个上传图片的input file选择框,用于上传某一类型的数张图片
[*]每次选择完本地图片后,图片便异步存储到后台的文件夹中;
[*]并将路径信息存储到数据库中;
[*]页面上显示此图的缩略图,并在旁边显示一个删除标记,当点击时,将此图片从页面、数据库、后台的文件夹中删除
[*]input file选择框清空,再点击用于上传下一张图片;
[/list]
JSP页面编写如下:
让form的target值为iframe,当form提交的时候,是异步iframe进行提交,不会影响页面的其他部分。
c:forEach部分是首先隐藏了上传后显示的图片标签和删除标签(这里最大可以上传三张)
相应的JS代码:采用的是JQuery写的,不过写的很啰嗦,有点像是原始JS操作
上传图片采用的是定义的form的submit()提交,iframe的异步提交。
返回操作将image的src的值,置为刚upload的图片在webroot中的位置,这样就能显示图片了。
删除图片时,利用Ajax将要删除的图片路径发送到后台,进行删除,删除成功时,将页面html中image的src值置为空。
后台处理的方法如下:
这样,便完成了要实现的功能。
[list]
[*]页面提供一个上传图片的input file选择框,用于上传某一类型的数张图片
[*]每次选择完本地图片后,图片便异步存储到后台的文件夹中;
[*]并将路径信息存储到数据库中;
[*]页面上显示此图的缩略图,并在旁边显示一个删除标记,当点击时,将此图片从页面、数据库、后台的文件夹中删除
[*]input file选择框清空,再点击用于上传下一张图片;
[/list]
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;
}
这样,便完成了要实现的功能。