Question

如何在JSP页面中 一次性添加多张图片

我有一个添加按钮，现在可以添加一张图片在我的DIV里边儿，但是添加第二张的时候就会把原有的一张给我覆盖了。
所以我想问一下，如何在我的 DIV 里面可以把我添加的多张图片显示出来。

<P id="df">添加附件: <input type="file" id="picPath" name="doc" size="50" onChange="PreviewImage('Preview',this,500,400);" /></P>

<p id="da">显示:</p><div id="Preview" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"> </div>

function checkPic() {
var picPath = document.getElementById("picPath").value;
var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase();
if (type != "jpg" && type != "bmp" && type != "gif" && type != "png") {
alert("请上传正确的图片格式");
return false;
}
return true;
}
//图片预览
function PreviewImage(divImage, upload, width, height) {
if (checkPic()) {
try {
var imgPath; //图片路径

var Browser_Agent = navigator.userAgent;
//判断浏览器的类型
if (Browser_Agent.indexOf("Firefox") != -1) {
//火狐浏览器

//getAsDataURL在Firefox7.0 无法预览本地图片
imgPath = upload.files[0].getAsDataURL();
document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>";
} else {
//IE浏览器 ie9 必须在兼容模式下才能显示预览图片
var Preview = document.getElementById(divImage);
Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value;
Preview.style.width = width;
Preview.style.height = height;
}
} catch (e) {
alert("请上传正确的图片格式");
}
}
}

Answer 1

　　方法如下：
　　<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%><%@ page import="Xproer.*" %><%
　　//实例化 上载bean
　　com.jspsmart.upload.SmartUpload su = new com.jspsmart.upload.SmartUpload();
　　//初始化
　　su.initialize(pageContext);
　　//设置上载 的最大值
　　su.setMaxFileSize(1024*1024);//1MB
　　//上载文件
　　su.upload();
　　com.jspsmart.upload.File file = su.getFiles().getFile(0);
　　//取附加信息
　　String userName = su.getRequest().getParameter("UserName");
　　Uploader up = new Uploader(pageContext,request);
　　up.SaveFile(file);
　　out.write(up.GetFilePathRel());
　　%>

Answer 2

document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>";
将div里面的内容替换掉了

用appendChild()追加
e.g. targetElement.appendChild(newTextNode);

var img = document.createElement("img");
img.setAttribute("src", "");//添加属性
。。。。
document.getElementById(divImage).appendChild(img);