功能描述

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

实现要点

 

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

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

 <!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>

JavaScript 图片的上传前预览（兼容所有浏览器）的更多相关文章

  1. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  4. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  6. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. FileReader与URL.createObjectURL实现图片、视频上传前预览

    之前做图片.视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览.实际上这只是文件“上传后再预览”,这既浪 ...

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

随机推荐

  1. Redis redis-cli常用操作

    一.安装 二.连接 在bin目录下./redis-cli -p port -a password 授权auth password 查看是否连接成功 ping PONG表示连接成功 三.键值相关命令 k ...

  2. hdu3065病毒侵袭持续中

    链接 上一篇的姊妹篇 没啥好说的 套模板 #include <iostream> #include<cstdio> #include<cstring> #inclu ...

  3. 转：不应该不知道C＋＋的常用库

    不应该不知道C++的常用库 非常惭愧,我过去也仅仅了解boost.STLport这样的库,以及一些GUI库,但是居然有如此众多的C++库,其实令我惊讶.当然,这个问题应该辩证的看,对于拿来主义确实可以 ...

  4. mybatis-config.xml简单笔记

    mybatis-config.xml简单笔记 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...

  5. linux 安装 apache2.2.31

    Linux下安装和配置Apache 概要:本文介绍在CentOS5.4 Linux中安装和配置Apache2.2.14,并且实现Apache和Tomcat6的整合.文章分为三部分,分别是删除系统自带的 ...

  6. 0512 Scrum 项目3.0

    SCRUM 流程的步骤2: Spring 计划 1. 确保product backlog井然有序.(参考示例图1) 2. Sprint周期,一个冲刺周期,长度定为两周,本学期还有三个冲刺周期. 3. ...

  7. python编程技巧2

    模块化 ---- 这是我们程序员梦寐以求的,通过模块化可以避免重复的制造轮子. 同时 模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块 ...

  8. Windows C++ 子目录数量

    CFileFind OneFile; BOOL bWorking = FALSE; ; ) != "\\") { strPath += "\\*.*"; } b ...

  9. Red Hat 6.0 Linux系统跳过登录界面直接进入系统

    修改/etc/init/tty.conf文件将exec /sbin/mingetty $TTY改为exec /sbin/mingetty --autologin root $TTY 或者修改/etc/ ...

  10. linux 安装 ftp

    1 安装 vsftpd 查看是否已经安装 vsftpd rpm -qa | grep vsftpd 如果没有 则安装  安装命令如下 yum -y install vsftpd 设置开机启动 chkc ...