用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 相关文章推荐
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
JS中substring与substr的用法
Nov 16 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
js实现多个标题吸顶效果
Jan 08 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
一个查看session内容的函数
2006/10/09 PHP
php GUID生成函数和类
2014/03/10 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
对象的类型:本地对象(1)
2006/12/29 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
js剪切板应用clipboardData实例解析
2016/05/29 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
layui table 参数设置方法
2018/08/14 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
anaconda升级sklearn版本的实现方法
2021/02/22 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
重阳节登山活动方案
2014/02/03 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
小学语文教学随笔
2015/08/14 职场文书
mysql优化
2021/04/06 MySQL
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技