2 qq 16126815 qq_16126815 于 2016.04.24 21:12 提问

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>

3个回答

muyan6648
muyan6648   2016.07.17 17:06
已采纳

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("详细图片不能多于九张!!!")
}
showbo
showbo   Ds   Rxr 2016.04.25 09:21
showbo
showbo 回复依旧入故sun: <script> function Image() { var doc = document.getElementById("doc"); var img = document.getElementById("preview"); var s=''; for (var i = 0; i < doc.files.length; i++) s += '<img src="' + window.URL.createObjectURL(doc.files[i]) + '" style="display:block;width:400px;height:200px"/>' img.innerHTML=s; } </script> <input type="file" name="doc" multiple id="doc" onchange="javascript:Image();"> <div id="preview"></div>
一年多之前 回复
showbo
showbo 回复依旧入故sun: 多选给file增加multiple,但是低版本ie不支持。。
一年多之前 回复
qq_16126815
qq_16126815 不能多选图片呀,还是一张一张显示的
一年多之前 回复
zjwlgr
zjwlgr   2016.04.25 16:52

用flash或ajax先上传在预览或用H5的canvas

qq_16126815
qq_16126815 好的,谢谢
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!