下面的是原來的代碼,只能預覽一張圖片,現在我想預覽多張圖片,並且可以增加刪除圖片操作,求代碼!!!
<script>
function Image() {
var doc = document.getElementById("doc");
var img = document.getElementById("preview");
img.style.display = 'block';
img.style.width = '400px';
img.style.height = '200px';
img.src = window.URL.createObjectURL(doc.files[0]);
}
</script>
</head>
<body >
<form id="form1" runat="server">
<input type="file" name="doc" id="doc" onchange="javascript:Image();">
<p>
<div><img id="preview" style="diplay:none" /></div>
var imgsl = document.getElementsByName("newImg");
var imgsl1 = imgsl.length;
if (imgsl1 < 9)
{
isl = isl + 1;
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
var img = document.createElement("img");
img.setAttribute("name", "newImg");
img.setAttribute("id", "img" + isl + "");
img.className = "showimg1";
img.src = evt.target.result;
var a = document.createElement("a");
a.setAttribute("name", "newa");
a.className = "showbutton";
a.onclick = function () { test(this) };
img.onmouseover = function () {
a.className = "showbutton1";
};
img.onmouseout = function () {
a.className = "showbutton";
};
var files = document.createElement("input");
files.name = "image";
files.type = "file";
files.id = "file" + isl + "";
files.onchange = function () { ylspxxtp(this) };
files.style.width = "80px";
document.getElementById("imgtd").appendChild(files);
document.getElementById("sptt1").appendChild(img);
document.getElementById("sptt1").appendChild(a);
}
reader.readAsDataURL(file.files[0]);
}
}
else{
alert("詳細圖片不能多於九張!!!")
}