js图片上传前预览功能(兼容所有浏览器)


Posted in Javascript onAugust 24, 2016

网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器)

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <style type="text/css">
 #preview,
 .img,
 img {
  width: 200px;
  height: 200px;
 }
 
 #preview {
  border: 1px solid #000;
 }
 </style>
</head>

<body>
 <div id="preview"></div>
 <input type="file" onchange="preview(this)" />
 <script type="text/javascript">
 function preview(file) {
  var prevDiv = document.getElementById('preview');
  if (file.files && file.files[0]) {
   var reader = new FileReader();
   reader.onload = function(evt) {
    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
   }
   reader.readAsDataURL(file.files[0]);
  } else {
   prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
  }
 }
 </script>
</body>
</html>

实现要点

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。 
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
测试了一下IE8+都没有问题。但是IE7下file.value被浏览器去掉了文件路径分割线从而显示不出来 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
js中格式化日期时间型数据函数代码
Nov 08 Javascript
非常棒的10款jQuery 幻灯片插件
Jun 14 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
JavaScript动态添加事件之事件委托
Jul 12 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 Javascript
使用RxJS更优雅地进行定时请求详析
Jun 02 Javascript
js实现飞机大战游戏
Aug 26 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 #Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 #Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 #Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 #Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 #Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 #Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
You might like
有关PHP性能优化的介绍
2013/06/20 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
php递归json类实例
2014/12/02 PHP
php时间函数用法分析
2016/05/28 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
初识Node.js
2014/09/03 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
JavaScript原型继承和原型链原理详解
2020/02/04 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
Python找出微信上删除你好友的人脚本写法
2018/11/01 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
3种python调用其他脚本的方法
2020/01/06 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
Python3 类型标注支持操作
2021/06/02 Python
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android