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个回答

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
支付宝加好友偷能量挖 回复依旧入故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>
3 年多之前 回复
showbo
支付宝加好友偷能量挖 回复依旧入故sun: 多选给file增加multiple,但是低版本ie不支持。。
3 年多之前 回复
qq_16126815
依旧入故sun 不能多选图片呀,还是一张一张显示的
3 年多之前 回复

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

qq_16126815
依旧入故sun 好的,谢谢
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
js 实现上传图片预览,IE浏览器无法显示
-
MiniUI+HTML5图片上传预览
-
file input插件图片上传问题
-
代码都没错,用filereader实现图片预览,无论如何div里都没有内容怎么办????
-
求大神帮忙指点下,怎么能让上传的图片分别预览
-
使用pdf.js,点击预览显示的不是需要的文件,而是网址首页,这是什么问题?
-
微信浏览器js sdk上传照片在IOS端上传的照片在服务端获取的后缀名不正确
-
jsp做一个论坛回复界面求助
-
SpringMvc+layui 实现图片上传更新头像 但是总弹出接口异常(很急!!!!)
-
asp.net webuploader多图片上传并保存文件路径到数据库
-
微信公众号拍照上传多张图片接口
-
请教关于客户端验证上传图片大小的问题
-
iframe中src传参数的问题,传递的参数到后台为空了。
-
plupload IE8\IE9浏览器下不请求flash方法
-
PDFJS加载流预览PDF不展示问题
-
页面有好几个上传图片的按钮,怎么能修改这段代码,让他有好几个按钮都好使
-
vue父组件夏多个子组件,子组件分别修改后其他子组件如何同步更新数据?
-
C#,用zyupload做Excel导入到数据库,数据多,加载慢,求zyupload的加载提示的事件
-
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
史上最全的后端技术大全,你都了解哪些技术呢?
| 导语工欲善其事,必先利其器;士欲宣其义,必先读其书。后台开发作为互联网技术领域的掌上明珠,一直都是开发者们的追逐的高峰。本文将从后台开发所涉及到的技术术语出发,基于...
吃人的那些 Java 名词:对象、引用、堆、栈
作为一个有着 8 年 Java 编程经验的 IT 老兵,说起来很惭愧,我被 Java 当中的四五个名词一直困扰着:**对象、引用、堆、栈、堆栈**(栈可同堆栈,因此是四个名词,也是五个名词)。每次我看到这几个名词,都隐隐约约觉得自己在被一只无形的大口慢慢地吞噬,只剩下满地的衣服碎屑(为什么不是骨头,因为骨头也好吃)。
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
团队中的 Git 实践
在 2005 年的某一天,Linux 之父 Linus Torvalds 发布了他的又一个里程碑作品——Git。它的出现改变了软件开发流程,大大地提高了开发流畅度!直到现...
不识 Pandas,纵是老手也枉然?
作者 |周志鹏 责编 | 郭 芮 这段时间和一些做数据分析的同学闲聊,我发现数据分析技能入门阶段存在一个普遍性的问题,很多凭着兴趣入坑的同学,都能够很快熟悉Python基础语法,然后不约而同的一头扎进《利用Python进行数据分析》这本经典之中,硬着头皮啃完之后,好像自己什么都会了一点,然而实际操作起来既不知从何操起,又漏洞百出。 至于原因嘛,理解不够,实践不够是两条老牌的拦路...
接班马云的为何是张勇?
上海人、职业经理人、CFO 背景,集齐马云三大不喜欢的张勇怎么就成了阿里接班人? 作者|王琳 本文经授权转载自燃财经(ID:rancaijing) 9月10日,张勇转正了,他由阿里巴巴董事局候任主席正式成为阿里巴巴董事局主席,这也意味着阿里巴巴将正式开启“逍遥子时代”。 从2015年接任CEO开始,张勇已经将阿里巴巴股价拉升了超过200%。但和马云强大的个人光环比,张勇显得尤其...
程序员终极面试指南!
身为技术人,如何拿下自己心仪的 offer? 作者|James Bedford 译者 |苏本如,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 以下为译文: 介绍 最近半年以来,我一直在积极指导开发人员,包括新手和有经验的开发人员。我发现,所有开发人员最关心的问题之一通常都是寻找工作。 如果你已经被录用了,很有可能你经历了一个令人精疲力竭的过程。...
我在快手认识了 4 位工程师,看到了快速发展的公司和员工如何彼此成就!
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 从西二旗地铁站B口出来,步行700多米可以看到一个工业建筑风格的院子。这个独立的院子和后厂村各大互联网公司的高楼林立有些不同。 院子里有7栋6层高的楼,几栋楼之间打通,可以从A栋自由穿行到F栋。这里就是快手总部。这个园区可以容纳6000多名员工,目前40%以上是研发人员。 这些研发人员维护着快手这款日活超过2亿的ap...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
分享一个 pycharm 专业版的永久使用方法
刚开始接触Python,首先要解决的就是Python开发环境的搭建。 目前比较好用的Python开发工具是PyCharm,他有社区办和专业版两个版本,但是社区版支持有限,我们既然想好好学python,那肯定得用专业的不是。 但他专业版要么只能试用一个月,要么就是 $ , 身为猿军中的一员怎么能让他们这些小伎俩阻碍了我们继续前进的步伐呢?所以我在度娘的引导下,一步步实现了PyCharm的永久使用(虽...
用Python分析2000款避孕套,得出这些有趣的结论
到现在为止,我们的淘宝教程已经写到了第四篇,前三篇分别是: 第一篇:Python模拟登录淘宝,详细讲解如何使用requests库登录淘宝pc端。 第二篇:淘宝自动登录2.0,新增Cookies序列化,教大家如何将cookies保存起来。 第三篇:Python爬取淘宝商品避孕套,教大家如何爬取淘宝pc端商品信息。 今天,我们来看看淘宝系列的第四篇 我们在上一篇的时候已经将淘宝数据爬取下来了,...
无需安装,仅需 1 条指令,秒实现内网穿透的神器,你有用过吗?
什么是 ServeoServeo 是一个免费的内网穿透服务,Serveo 可以将本地计算机暴露在互联网上,官方声称其为 Ngrok 的绝佳替代品。Serveo 其最大优点...
作为曾经的 Web 开发“王者”,jQuery 的传奇怎么续写?
作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现,jQuery作为Web开发首选工具的地位已经逐渐不保......任何事物都有其自身发展的兴盛与衰落,短期内jQuery并不会消失,但是对于其来说,又该如何维稳逆袭呢? 作者|Da...
重磅:硬核前端面试开源项目汇总(进大厂必备)
复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累!”开源项目https://github.com/InterviewMap/CS-Interview...
为什么平头哥做芯片如此迅猛?
作者 | 胡巍巍 发自杭州云栖大会责编 | 唐小引出品 | CSDN(ID:CSDNnews)2018年10月31日,阿里旗下的平头哥半导体有限公司成立。如今,平头哥成立...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
多线程编程是后台开发人员的基本功
这里先给大家分享一个小故事:在我刚开始参加工作的那年,公司安排我开发一款即时通讯软件(IM,类似于 QQ 聊天软件),在这之前我心里也知道如果多线程操作一个整型值是要加锁...
Java 网络爬虫,就是这么的简单
这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识。第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑列表新闻的新闻标题和详情页为例,需要提取的内容如下图所示: 我们需要提取图中圈出来的文字及其对应的链接,在提取的过程中,我们会使用两种方式来提取,一种是 Jsoup 的方式,另一种是 httpcli...
500行代码,教你用python写个微信飞机大战
这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手。 帮助蹲厕族、YP族、饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右手有节奏有韵律的朝着同一个方向来回移动起来! 这是史诗级的发明,是浓墨重彩的一笔,是…… 在一阵抽搐后,我结束了游戏,瞬时觉得一切都索然无味,正在我进入贤者模式时,突然想到,如果我可以让更多人已不同的方式体会到这种美轮美奂的感觉岂不美哉? 所以我打开电脑,创建了一个 `plan_game.py`……
相关热词 c#panel增加滚动条 c#中生成的dll文件 c# 模板类 c# 截取txt文本内容 c# 内存 占用 c#时间格式化 不带- c#替换字符串中指定位置 c# rdlc 动态报表 c# 获取txt编码格式 c#事件主动调用