qq_16126815
依旧入故sun
采纳率100%
2016-04-24 13:12 阅读 2.8k

js怎么获取file的值实现多图片预览呀

40

下面的是原来的代码,只能预览一张图片,现在我想预览多张图片,并且可以增加删除图片操作,求代码!!!

 <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 jiangjixiangjava 2016-07-17 09: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 GoCityPass新加坡曼谷通票 2016-04-25 01:21
    点赞 1 评论 复制链接分享
  • zjwlgr 程序猿-小翌 2016-04-25 08:52

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

    点赞 评论 复制链接分享

相关推荐