本地多图上传预览

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>本地单图上传预览</title>
  9 </head>
 10 <body>
 11 
 12 <input type="file" name="" id="imgUpBtn" multiple onchange="javascript:setImagePreviews()">
 13 <div id="addPictures"></div>
 14 
 15 
 16 <script type="text/javascript">
 17     function setImagePreviews() {
 18         var fileUp = document.getElementById("imgUpBtn");
 19         var addImgs = document.getElementById("addPictures");
 20         addImgs.innerHTML = "";
 21         var fileList = fileUp.files;
 22         for (var i = 0; i < fileList.length; i++) {
 23             addImgs.innerHTML += "<img id='img" + i + "'  />";
 24             var imgObjPreview = document.getElementById("img" + i);
 25             imgObjPreview.style.width = '150px';
 26             imgObjPreview.style.height = '150px';
 27             imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]);
 28         }
 29     }
 30 </script>
 31 
 32 
 33 <!--<script type="text/javascript">-->
 34 
 35     <!--//下面用于多图片上传预览功能-->
 36 
 37     <!--function setImagePreviews() {-->
 38 
 39         <!--// 上传按钮-->
 40         <!--var fileUp = document.getElementById("imgUpBtn");-->
 41 
 42         <!--// 获取需要添加图片的父元素-->
 43         <!--var addImgs = document.getElementById("addPictures");-->
 44 
 45         <!--// 每次调用时令元素内内容为空-->
 46         <!--addImgs.innerHTML = "";-->
 47 
 48         <!--// 图片地址类数组-->
 49         <!--var fileList = fileUp.files;-->
 50 
 51         <!--// 循环类数组-->
 52         <!--for (var i = 0; i < fileList.length; i++) {-->
 53 
 54             <!--// 向元素内添加图片标签-->
 55             <!--addImgs.innerHTML += "<img id='img" + i + "'  />";-->
 56 
 57             <!--// 获取图片id,每次循环赋值给imgObjPreview的id都不同-->
 58             <!--var imgObjPreview = document.getElementById("img" + i);-->
 59 
 60             <!--// 判断-->
 61             <!--if (fileUp.files && fileUp.files[i]) {-->
 62 
 63                 <!--//火狐下,直接设img属性-->
 64 
 65                 <!--imgObjPreview.style.width = '150px';-->
 66 
 67                 <!--imgObjPreview.style.height = '150px';-->
 68 
 69                 <!--// 每次循环都向图片标签添加路径-->
 70                 <!--imgObjPreview.src = window.URL.createObjectURL(fileUp.files[i]);-->
 71 
 72             <!--}-->
 73 
 74             <!--else {-->
 75 
 76                 <!--//IE下,使用滤镜-->
 77 
 78                 <!--fileUp.select();-->
 79 
 80                 <!--var imgSrc = document.selection.createRange().text;-->
 81 
 82                 <!--alert(imgSrc)-->
 83 
 84                 <!--var localImgId = document.getElementById("img" + i);-->
 85 
 86                 <!--//必须设置初始大小-->
 87 
 88                 <!--localImgId.style.width = "150px";-->
 89 
 90                 <!--localImgId.style.height = "150px";-->
 91 
 92                 <!--//图片异常的捕捉,防止用户修改后缀来伪造图片-->
 93 
 94                 <!--try {-->
 95 
 96                     <!--localImgId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";-->
 97 
 98                     <!--localImgId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;-->
 99 
100                 <!--}-->
101 
102                 <!--catch (e) {-->
103 
104                     <!--alert("您上传的图片格式不正确,请重新选择!");-->
105 
106                     <!--return false;-->
107 
108                 <!--}-->
109 
110                 <!--imgObjPreview.style.display = 'none';-->
111 
112                 <!--document.selection.empty();-->
113 
114             <!--}-->
115 
116         <!--}-->
117 
118         <!--return true;-->
119 
120     <!--}-->
121 
122 <!--</script>-->
123 </body>
124 </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

编写高性能HTML网页应用

你怎么能提高网页性能?   大多数开发者会通过JavaScript和图片来优化,通过服务器配置,压缩文件和合并文件 - 甚至调整CSS(合并小图片)。   可...

35840
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

1.2K110
来自专栏老马寒门IT

06-移动端开发教程-fullpage框架

CSS3的新特性已经讲完了,接下来我们看一下jQuery的一个全屏jQuery全屏滚动插件fullPage.js。我们经常见到一些全屏的特绚丽页面,手指或者鼠标...

57590
来自专栏较真的前端

那些暖人心却鲜为人知的CSS属性

22460
来自专栏大数据钻研

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的,但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中...

29840
来自专栏大数据钻研

初识HTML之基础篇

前端认知 ---- 一、公司开发流程 1、 产品需求(产品经理给需求文档) 2、项目设计(视觉设计师给PSD文件,交互设计师配合) 3、前端开发 ...

33740
来自专栏韩东吉的Unity杂货铺

零基础入门 8: Canvas和EventSystem

UGUI是新版Unity自带的原生UI系统,组件也在不断的增加扩展,基本的贴图,文本,按钮等还是可以用的。接下来的几篇内容会以UGUI展开分享。

16030
来自专栏HTML5学堂

CSS选择器优先级

HTML5学堂:CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级:id > class > tagname。具体我们来看看...

31030
来自专栏偏前端工程师的驿站

CSS魔法堂:稍稍深入伪类选择器

 过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分...

14720
来自专栏lzj_learn_note

前端开发学习──初识Html

type:disc默认 实心小圆圈;square 小方块;circle 空心小圆圈

25220

扫码关注云+社区

领取腾讯云代金券