JavaScript 图片的上传前预览（兼容所有浏览器）

功能描述

通过 JavaScript 实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。

实现要点

● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。

● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。

 1  <!DOCTYPE html>
 2  <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 5 <style type="text/css">
 6  #preview, .img, img
 7  { 8  width:200px;
 9  height:200px;
10  }
11  #preview
12  {13 border:1px solid #000;
14 }
15  </style>
16  </head>
17 <body>
18  <div id="preview"></div>
19 <input type="file" onchange="preview(this)" />
20  <script type="text/javascript">
21  function preview(file)
22  {
23  var prevDiv = document.getElementById('preview');
24  if (file.files && file.files[0])
25  {
26  var reader = new FileReader();
27  reader.onload = function(evt){
28  prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
29 }
30  reader.readAsDataURL(file.files[0]);
31 }
32  else
33  {
34  prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
35  }
36  }
37  </script>
38  </body>
39  </html>

JavaScript 图片的上传前预览（兼容所有浏览器）相关推荐

JavaScript 图片的上传前预览
实例一: 实现要点 ● 对于 Chrome.Firefox.IE10 使用 FileReader 来实现. ● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransfo ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
[ASP.NET2.0] asp.net在ie7中使用FileUpload上传前预览图片 [ZT]
asp.net在ie7中使用FileUpload上传前预览图片因为安全性问题,IE7禁用了image控件引用本地图片,为了这个问题郁闷了好几天,终于找到了解决方案,好东西要与大家分享,代码如下: 此 ...
input文件框选择本地图片后页面预览图片并获取图片长宽以及大小图片上传前预览
前面有转过一篇通过HTML5来实现图片上传前预览 ,现在借助FileReader也实现了这个需求.并且同时还可以获得图片的长宽相素以及图片文件的大小.demo如下: <html> < ...
html ie8上传图片,图片上传本地预览兼容ie8
工作中遇到的,总结下来了,图片上传本地预览限制图片最大为2M 图片上传本地预览 #preview1{width:260px;height:190px;border:1px solid #000;ove ...
Vue中通过el-upload组件实现上传前预览本地图片
1.实现效果如下图所示用户选择本地待上传的图片,选择成功后,上传组件隐藏,呈现本地预览组件,单击图片并实现图片的放大呈现 2.template(相当于html)部分的代码如下代码实现逻辑: 在el ...
html 上传图片前预览,HTML实现图片上传前预览
HTML5 Upload #destination{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMeth ...
CKEditor4.6.2 图片/Flash上传及预览附件上传
最近做富文本编辑器,最后选用了 CKeditor,个人更喜欢这个编辑器的风格.本文将不再阐述CKeditor的基础配置,比较的简单,网上例子不少,官方的demo也有. 好,直接进入正题: 1.图片上传 ...
微信小程序实现图片是上传、预览功能
本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法,分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 1.可以调用相机也可以从本地相册选择 2.本地实现 ...

JavaScript 图片的上传前预览（兼容所有浏览器）

JavaScript 图片的上传前预览（兼容所有浏览器）相关推荐

最新文章

热门文章