功能描述

通过 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. 安装 SciPy 和 scikit-learn 升级pip 及pip基本命令表

    安装Scipy和scikit-learn出错,出错记录及当时最终解决办法 问题: 一.使用pip直接安装 直接pip install scipy C:\Users\Plain>pip insta ...

  2. Python centOS 安装

    Python 默认版本是2.4.3的,如果需要使用其他版本的需要下载安装 1.下载安装 # cd /usr/local/src # wget https://www.python.org/ftp/py ...

  3. Hibernate延迟加载机制

    延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作.在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另 ...

  4. C语言中system()函数的用法总结(转)

    system()函数功能强大,很多人用却对它的原理知之甚少先看linux版system函数的源码: #include <sys/types.h> #include <sys/wait ...

  5. 用单分子测序（single-molecule sequencing）和局部敏感哈希（locality-sensitive hashing）来组装大型基因组

    Assembling large genomes with single-molecule sequencing and locality-sensitive hashing 好好读读,算法系列的好文 ...

  6. JavaScript基础(慕课)

    1. JavaScript函数: function 函数名() { 函数代码;//完成特定功能的代码. }PS:函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了 2.  ...

  7. hdu 5875 ACM/ICPC Dalian Online 1008 Function

    题目链接 分析:用RMQ预处理每段的最小值,然后对每次查询的区间找最靠近左边的小于的值,取模后递归操作.因为每次取模至少会使原来的值减半,所以递归操作是的.每次查询最小值如果通过线段树那么最终的复杂度 ...

  8. 《Linux内核设计与实现》课本第一章&第二章学习笔记

    <Linux内核设计与实现>课本学习笔记 By20135203齐岳 一.Linux内核简介 Unix内核的特点 Unix很简洁,所提供的系统调用都有很明确的设计目的. Unix中一切皆文件 ...

  9. iOS开发拓展篇—应用之间的跳转和数据传递

    iOS开发拓展篇—应用之间的跳转和数据传 说明:本文介绍app如何打开另一个app,并且传递数据. 一.简单说明 新建两个应用,分别为应用A和应用B. 实现要求:在appA的页面中点击对应的按钮,能够 ...

  10. 【lattice软核】MICO8流程

    The LatticeMico System software is composed of three bundled applications:  Mico System Builder (MS ...