用file标签实现多图文件上传预览


Posted in Javascript onFebruary 14, 2017

js 代码:

<script> 
 //下面用于多图片上传预览功能
 function setImagePreviews(avalue) {
 var docObj = document.getElementById("files");
 var dd = document.getElementById("preview");
 dd.innerHTML = "";
 var fileList = docObj.files;
 for (var i = 0; i < fileList.length; i++) {
 dd.innerHTML += "<div style='float:left' > <img id='img" + i + "' /> </div>";
 var imgObjPreview = document.getElementById("img"+i);
 if (docObj.files && docObj.files[i]) {
 //火狐下,直接设img属性
 imgObjPreview.style.display = 'block';
 //控制缩略图大小
 imgObjPreview.style.width = '70px';
 imgObjPreview.style.height = '70px';
 //imgObjPreview.src = docObj.files[0].getAsDataURL();
 //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
 imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
 }
 else {
 //IE下,使用滤镜
 docObj.select();
 var imgSrc = document.selection.createRange().text;
 alert(imgSrc)
 var localImagId = document.getElementById("img" + i);
 //必须设置初始大小
 localImagId.style.width = "70px";
 localImagId.style.height = "70px";
 //图片异常的捕捉,防止用户修改后缀来伪造图片
 try {
  localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
  localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
 }
 catch (e) {
  alert("您上传的图片格式不正确,请重新选择!");
  return false;
 }
 imgObjPreview.style.display = 'none';
 document.selection.empty();
 }
 }
 return true;
 }
 </script>

HTML代码:

<form method="post" enctype="multipart/form-data"> 
 <input type="file" accept="image/png,image/gif,image/jpg,image/jpeg" id="files" name="files" multiple onchange="javascript:setImagePreviews();" />
 <input type="button" id="upload" value="上传" />
 <div id="preview"> 
 </div> 
</form>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
js验证账户名是否重复
May 26 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 #Javascript
javascript中BOM基础知识总结
Feb 14 #Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
Feb 14 #Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 #Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 #Javascript
浅谈JS验证表单文本域输入空格的问题
Feb 14 #Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 #Javascript
You might like
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
bootstrap滚动监控器使用方法解析
2017/01/13 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
python调用staf自动化框架的方法
2018/12/26 Python
使用Django连接Mysql数据库步骤
2019/01/15 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
python做接口测试的必要性
2019/11/20 Python
python selenium操作cookie的实现
2020/03/18 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
优秀学生自我鉴定范例
2013/12/18 职场文书
项目负责人任命书
2014/06/04 职场文书
客户答谢会活动方案
2014/08/31 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2016党校培训心得体会
2016/01/07 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
详解Python类和对象内容
2021/06/22 Python
Javascript 解构赋值详情
2021/11/17 Javascript
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android