依旧入故sun 2016-04-24 13:12 采纳率: 100%
浏览 2927
已采纳

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条回答 默认 最新

  • 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("详细图片不能多于九张！！！")
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料