依旧入故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 请教：如何用postman调用本地虚拟机区块链接上的合约？
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题：[h264 @ 000000004faf7500]no frame？
  • ¥15 乘性高斯噪声在深度学习网络中的应用
  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛