用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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
Array栈方法和队列方法的特点说明
Jan 24 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
利用策略模式与装饰模式扩展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文件上传表单摘自drupal的代码
2011/02/15 PHP
php生成略缩图代码
2012/07/16 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
php微信公众号开发之音乐信息
2018/10/20 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
json跟xml的对比分析
2008/06/10 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
浅析JavaScript函数的调用模式
2016/08/10 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JS实现数组的增删改查操作示例
2018/08/29 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python3.4中清屏的处理方法
2020/07/06 Python
注塑工厂厂长岗位职责
2013/12/02 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
学生检讨书范文
2015/01/27 职场文书
大二学年个人总结
2015/03/03 职场文书
义卖募捐活动总结
2015/05/09 职场文书
Python3 如何开启自带http服务
2021/05/18 Python