下载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. Java中的几种设计模式

    如果从事JAVA相关的开发,都不可避免的要用到抽象和封装,这是JAVA的一个特点,同时也是每个开发者必须掌握的,JAVA是这样,Android更是如此.而设计模式就是告诉我们应该如何写出高效且更具应用 ...

  2. 在Action中操作域对象

    ----------------------siwuxie095 在 Action 中操作域对象 1.在 Action 中可以操作的域对象主要有三个: (1)Request (2)Session (3 ...

  3. Rabbitmq的几种交换机模式

    Rabbitmq的核心概念(如下图所示):有虚拟主机.交换机.队列.绑定: 交换机可以理解成具有路由表的路由程序,仅此而已.每个消息都有一个称为路由键(routing key)的属性,就是一个简单的字 ...

  4. Golang之排序算法

    冒泡排序 package main //冒泡排序 import "fmt" func bsort(a []int) { ; i < len(a); i++ { ; j < ...

  5. Java多线程同步方法

    一.同步方法 即有synchronized关键字修饰的方法. 由于java的每个对象都有一个内置锁,当用此关键字修饰方法时, 内置锁会保护整个方法.在调用该方法前,需要获得内置锁,否则就处于阻塞状态. ...

  6. Android文件上传

    服务端: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syst ...

  7. Docker的安装，配置，更新和卸载

    我们可以在Linux中安装Docker并运行Hello world应用程序.通过下面这些操作,我们将会学到更多有关于Docker的基础特征.我们将会学到如何: 安装Docker引擎 在一个容器中运行软 ...

  8. java中double和float精度丢失问题

    为什么会出现这个问题呢,就这是java和其它计算机语言都会出现的问题,下面我们分析一下为什么会出现这个问题:float和double类型主要是为了科学计算和工程计算而设计的.他们执行二进制浮点运算,这 ...

  9. SOA和微服务到底是什么关系？

    SOA和微服务到底是什么关系? 说实话,我确实不明白SOA和微服务到底有什么本质上的区别,两者说到底都是对外提供接口的一种架构设计方式.我倒觉得微服务其实就是随着互联网的发展,复杂的平台.业务的出现, ...

  10. linux每天一小步---rm命令详解

    1 命令功能 rm命令用于删除文件或者目录,值得注意的是linux下的删除不弯曲等同于windows系统下的删除操作,linux系统下一旦删除了文件或者目录那么它将消失,而windows系统下我们还可 ...