功能描述

通过 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. android 待机流程

    以下分析基于android2.2的google源码.  开机启动时,首先执行PhoneWindowManager.systemReady()(这之前的流程不分析).调用KeyguardViewMed ...

  2. (转) C++中基类和派生类之间的同名函数的重载问题

    下面有关派生类与基类中存在同名函数 fn: class A { public: void fn() {} void fn(int a) {} }; class B : public A { publi ...

  3. Nginx 1.10.2 php 7 环境安装

    1.安装编译工具和库文件,红色部分提示在centos镜像站点上查不到包,用yum安装的时候要认真看那些包没有找到,用yum的时候尽量不要使用-y选项 yum install gcc automake ...

  4. Centos7 搭建 Keepalived+LVS 备注

    NAT模型需要RealServer gateway设定为,DR模式需要执行 RealServer.sh.需要先安装network-tools. #!/bin/bash#description : st ...

  5. Qt工程转化为Vs工程

    cmd中输入: qmake -tp vc XXX.pro 一般需要将qmake的路径配置到系统环境变量中去...

  6. hdu 3518 （后缀数组）

    题目描述: 找出一个字符串中至少重复出现两次的字串的个数(重复出现时不能重叠). code: 后缀数组处理,对于得到height 进行查找...  参考http://blog.csdn.net/mis ...

  7. Bootstrap自带的chart插件

    <!doctype html> <html> <head> <title>Line Chart</title> <script src ...

  8. CTSC2015 酱油记

    终于又到写酱油记的时间了...不过开心不起来诶.. Day 0 晚上睡不着觉也不造为啥... 起来看了一本亚里亚小说,继续睡,睡不着... 又起来看了一本亚里亚小说,继续睡,睡不着... 然后...死 ...

  9. android动画的Interpolator

    1.Interpolator插值,控制一个动画变化过程中是线性匀速变化,还是加速变化,还是按照某种函数关系变化. 2.android提供的几种插值. 3.对上边提供的各个效果进行测试 (1)Accel ...

  10. @HTML.checkboxFor()用法

    <%=Html.CheckBox("chk1",true) %> <%=Html.CheckBox("chk1", new { @class= ...