功能描述

通过 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. web过滤器中获取请求的参数(content-type:multipart/form-data)

    1.前言: 1.1 在使用springMVC中,需要在过滤器中获取请求中的参数token,根据token判断请求是否合法: 1.2 通过requst.getParameter(key)方法获得参数值; ...

  2. POI导出excel的简单demo

    目前使用过两种导出excel的方式,一种是如题所示的使用POI的方式进行数据的导出,这种方式一般只有在处理比较多的数据或者说需要导出的excel表格中有图片之类的需要特殊处理的文件的时候使用:还有一种 ...

  3. spark standalone模式单节点启动多个executor

    以前为了在一台机器上启动多个executor都是通过instance多个worker来实现的,因为standalone模式默认在一台worker上启动一个executor,造成了很大的不便利,并且会造 ...

  4. 一个php soap的错误记录

    今天使用php soap实现两个系统之间的互通 在写好php的soapserver后,client端调用一直报 looks like we got no XML document,尝试好久后无法解决 ...

  5. 用python的BeautifulSoup分析html 【转】

    原地址:http://www.cnblogs.com/twinsclover/archive/2012/04/26/2471704.html 序言 之前用python爬取网页的时候,一直用的是rege ...

  6. progresql - 常用的管理命令

    1.查看当前数据库实例的版本 Select version(); 2.查看数据库的启动时间 Select pg_postmaster_start_time(); 3.查看最后load配置文件的时间 s ...

  7. Cognition math based on Factor Space (2016.05)

    Cognition math based on Factor Space Wang P Z1, Ouyang H2, Zhong Y X3, He H C4 1Intelligence Enginee ...

  8. JS转换时间戳为“刚刚”、“1分钟前”、“2小时前”“1天前”等格式

    var minute = 1000 * 60; var hour = minute *60; var day = hour *24; var week = day * 7; var month = d ...

  9. 云端 Linux下安装 Java

    根据需要在给云端的机器安装Java 问题的分解为2个一个是Java源文件的传输.一个是Linux下Java的安装. Java 传输到云端: 可以通过SSH Secure File Transfer C ...

  10. 最小割 总结&&做题记录

    模型要点: 1.一般适用于二取一问题或者01规划. 2.利用最小割=最大流,转化为最大流求之. 建议阅读胡伯涛的论文 <<最小割模型在信息学竞赛的应用>>,有精彩有序的证明和各 ...