用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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
EasyUI实现第二层弹出框的方法
Mar 01 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 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 IE中下载附件问题解决方法
2014/01/07 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
Vue源码解析之Template转化为AST的实现方法
2018/12/14 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python3.7调试的实例方法
2020/07/21 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
奉献演讲稿范文
2014/05/21 职场文书
大型公益活动策划方案
2014/08/20 职场文书
会计人员岗位职责
2015/02/03 职场文书
会计岗位职责范本
2015/04/02 职场文书
行政介绍信范文
2015/05/04 职场文书
监护人证明
2015/06/19 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP