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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。 ? CollapsingToolbarLayout 可以看到,Toolbar的标题放...

2336
来自专栏移动开发

关于 CheckBox 你或许不知道的一些知识点

重点是 android:button=”@null” 和 android:drawableRight=”?android:attr/listChoiceInd...

2255
来自专栏Python

HTML基础

一 html html结构 ? !DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档 <html></html>是文档的...

2185
来自专栏韦弦的偶尔分享

微信小程序设置图片固定比例

有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设...

9542
来自专栏木子昭的博客

让css3动画变得有趣wowjs

animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。

2203
来自专栏JetpropelledSnake

Linux学习笔记之Xshell配色方案定制

点击 Browse 按钮,弹出如下面板,选择 ANSI Colors on Black,然后点击右侧save as 按钮,命名为 zkl。

1.1K1
来自专栏vue学习

小程序 — scroll-view组件实现滚动

(1)当然,关于scroll-view组件官网还提供了许多其它的属性和事件方法,大家仔细去看看:

2206
来自专栏小程序之家

如何使用小程序媒体组件

图片,视频,音乐是小程序使用中不可缺少的部分,这篇文章中,我们将介绍小程序媒体组件的使用。媒体组件分为audio音频组件,image图像组件,video视频组件...

8861
来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

1855
来自专栏微信小开发

五分钟掌握微信小程序轮播图

从公共库v1.4.0开始,change事件返回detail中包含一个source字段,表示导致变更的原因,可能值如下: autoplay 自动播放导致 swip...

2336

扫码关注云+社区

领取腾讯云代金券