下载DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload

对于现代浏览器来说，要实现图片预览非常简单：

1、fileReader.readAsDataURL(file)

2、window.URL.createObjectURL(file)

以上两种方法分别可以得到一个base64和一个blob对象的URL地址，从而实现预览。但是，他们只支持在IE10+，显然这是不够的，如何实现低版本IE浏览器的图片预览呢？代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <script type="text/javascript" language="javascript">

        $('#preview_fake').change(function () {

            previewImg($(this), $('#preview'));

        });

        function previewImg($inputId, $previewId) {

            var inputId = $inputId[0],

                previewId = $previewId[0];

            $previewId.empty();

            if(/msie/.test(navigator.userAgent.toLowerCase())){

                if($.support.version == 6.0){

                    $previewId.attr("src",inputId.value);

                }else{

                    inputId.select();

                    var reallocalpath = document.selection.createRange().text;

                    previewId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale',src=\"" + reallocalpath + "\")";

                    // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片

                    previewId.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';

                }

            }else {

                $previewId.attr("src",window.URL.createObjectURL(previewFake.files[0]));

            }

        }

 </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         选择图片：<input type="file" size="20" id='preview_fake'" />

     </div>

        <div id="preview" style="width: 300px; height: 300px">

     </div>

     </form>

 </body>

</html>

这样，我们就能够在IE10- 下预览上传的图片了。

在这里，有必要对几个参数说明一下，以免后人再入坑！

progid:DXImageTransform.Microsoft.AlphaImageLoader([enabled=bEnabled ,] [sizingMethod=sSize ,] src=sURL)

enabled： 可选。布尔值(Boolean)。设置或检索滤镜是否激活。

  • true：默认值。滤镜激活。
  • false：滤镜被禁止。

sizingMethod：可选。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。

  • crop：剪切图片以适应对象尺寸。
  • image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
  • scale：缩放图片以适应对象的尺寸边界。

src： 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

以上，可以实现低版本IE浏览器的图片预览，但要上传到服务器还需要一番周折。对于单张图片，可以通过<form>表单提交，但对于多张图片，这需要flash技术的支持，实现起来相当麻烦。

这里，楼主推荐一个现有的轮子：webuploader 组件。

【javascrpt】——图片预览和上传，兼容IE 9-的更多相关文章

  1. webform的原生操作图片预览和上传

    1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...

  2. jQuery+Ajax实现图片的预览和上传

    jQuery+Ajax实现图片的预览和上传 1.配置Spring-web.xml <!-- springmvc上传图片 --> <bean id="multipartRes ...

  3. 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑

    项目中需要用到多图片上传功能,于是在百度搜了一下,首先使用了kissy uploader,是由阿里前端工程师们发起创建的一个开源 JS 框架中的一个上传组件...但,后面问题出现了. 在对添加的信息进 ...

  4. 对百度WebUploader的二次封装,精简前端代码之图片预览上传(两句代码搞定上传)

    前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同 ...

  5. H5实现多图片预览上传，可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  6. jquery.uploadView 实现图片预览上传

    图片上传,网上有好多版本,今天也要做一个查了好多最终找到了一个uploadview 进行了一下修改 来看代码 @{ Layout = null; } <!DOCTYPE html> < ...

  7. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  9. 浅谈简单实现file控件的图片预览，裁剪和上传。

    1.图片预览之FileReader对象    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据 ...

随机推荐

  1. set 续2

    --------siwuxie095                 用 set 命令进行字符串处理(这个不应只属于 set 的内容,应该归属于格式内容, 在没有 set 的情况下,格式仍旧适用)   ...

  2. sqlserver 开窗函数Over()的使用

    利用over(),将统计信息计算出来,然后直接筛选结果集 declare @t table(ProductID int,ProductName varchar(20),ProductType varc ...

  3. 使用类加载器加载配置文件/getClassLoader().getResourceAsStream()

    加载配置文件的两种方式; 1. 2. 两者相比,第一种方式更为方便,因为文件目录发生改变就会找不到.

  4. Centos 7 手把手教你使用YUM方式安装并配置Nginx+php7-fpm+MySQL

    需要准备的内容 一台纯净系统的服务器 远程连接服务器的工具 (我这里使用Xshell) 安装nginx 链接上服务器后执行 yum install nginx  这里需要输入y 后回车,开始安装ngi ...

  5. 一个用户管理的ci框架的小demo--转载

    一个ci框架的小demo 最近在学习ci框架,作为一个初学者,在啃完一遍官方文档并也跟着官方文档的例程(新闻发布系统)做了一遍,决定在将之前练习PHP与MySQL数据库的用户管理系统再用ci框架实现一 ...

  6. 从Objective－C到Swift 单例模式

    在Objective-C中经常会用到单例模式.最常见的就是: [UIApplication sharedApplication].delegate 这里的sharedApplication就是一个返回 ...

  7. pointcloud(点云)与mesh(面元)模型的区别

    点元与面元

  8. Shell编程-02-Shell变量

    目录 什么是Shell变量 变量类型 环境变量初始化及其对应文件的生效顺序 什么是Shell变量     在初等数学数学方程式中,我们会经常碰到类似于这样的方程式:y=x+1 ,等号左右两边的x和y称 ...

  9. CodeForces 572D Minimization(DP)

    题意翻译 给定数组AAA 和值kkk ,你可以重排AAA 中的元素,使得∑i=1n−k∣Ai−Ai+k∣\displaystyle\sum_{i=1}^{n-k} |A_i-A_{i+k}|i=1∑n ...

  10. Objective-C 学习笔记(三) Numbers/数字

    Objective-C Numbers/数字 Objective-C中提供了一系列的NSNumber和重要的工作方法: + (NSNumber *)numberWithBool:(BOOL)value ...