程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程解疑 >> javascript-js怎麼獲取file的值實現多圖片預覽呀

javascript-js怎麼獲取file的值實現多圖片預覽呀

編輯:編程解疑
js怎麼獲取file的值實現多圖片預覽呀

下面的是原來的代碼,只能預覽一張圖片,現在我想預覽多張圖片,並且可以增加刪除圖片操作,求代碼!!!

 <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("詳細圖片不能多於九張!!!")
}
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved