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>
大约 2 年之前 回复
showbo
showbo 回复依旧入故sun: 多选给file增加multiple,但是低版本ie不支持。。
大约 2 年之前 回复
qq_16126815
qq_16126815 不能多选图片呀,还是一张一张显示的
大约 2 年之前 回复
zjwlgr
zjwlgr   2016.04.25 16:52

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

qq_16126815
qq_16126815 好的,谢谢
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
通过 html5 FileReader 实现上传图片预览功能
Html 部分 JS部分 function showPreview(source) { var file = source.files[0]; if (window.FileReader) { var
jquery.fileupload.js插件使用初探--多图片上传预览
一、前台代码: jquery.fileupload.js使用测试 .bar { margin-top:10px; height:10px; max-width: 370px; background: green;
用JS脚本实现本地和远程图片或声音文件预览
function divshow(){ document.formSend.Flag.value="Send"; document.all.divImg.innerHTML=; if (document.all.SendType.value == "远程地址"){  document.all.divHttp.style.display=block;  document.all.divFil
js实现图片的本地预览
    最近在学习JS的过程中,写了一个图片本地预览的小demo,遇到了浏览器处于安全设置,限制了获取文件在本地的绝对路径问题,已通过查找资料解决,现记录下来备忘。    实现图片的预览,两步即可完成。首先,使用&amp;lt;input type=&quot;file&quot; /&amp;gt;来让用户选择图片;然后,通过JS获取文件路径,将之放入到&amp;lt;img&amp;gt;标签的src属性中。&amp;lt;h2&amp;gt;图片预览&amp;lt;...
type=file多图片上传 预览和删除
一、背景    项目中要实现一个这样的功能,在移动端上传照片或拍照直接上传,照片能够回显到页面上;点击照片右上角的删除,可以删除此照片。二、实现    点击页面上图片,自动打开系统拍照和相册。实现方法如下:        var fileArr = []; //存放图片内容的数组,提交数据到后台时用         $('#uploadFile').unbind().on('click',func...
input file 实现图片预览效果
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能;之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但是头像却已经改变,如果在需要改变就导致了多余图片的保存服务器 在网上找了下解决方案,如下所示:               html5 图片上传预览   
HTML5读取input[type=file]中的图片
概述   在我们做用户注册的时候经常会设计到用户头像之类的上传,这时我们会用到一个标签,但是我们该怎样获取标签中选取的图片呢?   这里我们使用HTML5中的FileReader接口来实现这样的操作。 demo   我用如下代码来讲述该怎样实现这样的操作: HTML代码: 获取图片   首先,肯定会有一个已经,form写不写action和m
html5 实现图片预览
由于 JavaScript 对用户上传的文件操作非常有限,尤其是无法读取文件内容,使得很多需要操作文件的网页不得不用 Flash 这样的第三方插件来实现。 随着 HTML5 的普及,新增的 File API 允许 JavaScript 读取文件内容,获得更多的文件信息。 HTML5 的 File API 提供了 File 和 FileReader 两个主要对象,可以获得文件信息并读取文件。
js实现图片本地预览功能
效果
【技巧】input选择图片预览
预览效果见下图:HTML代码如下:<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta charset="utf-8" /> </head> <body> <div class="content" style="margin-top:100px;height:200px;"> <