<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>图片上传预览，兼容IE</title>

    <style>

        div {

            width: 400px;

            height: 400px;

        }

        img {

            width: 100%;

        }

    </style>

</head>

<body>

    <input type="file" id="file">

    <div>

        <img src="" alt="" id="img"> h5浏览器的显示

    </div>

    <div id="img_div">

        IE的渲染盒子

    </div>

    <script>

        var file = document.getElementById('file')

        var img = document.getElementById('img')

        var img_div = document.getElementById('img_div')

        file.onchange = function(e) {

            try {

                //创建一个FileReader对象

                var reader = new FileReader();

                //读取file文件；

                reader.readAsDataURL(file.files[0]);

                //当文件读取成功后，将结果保存到url变量里；

                reader.onload = function(evt) {

                    var url = evt.target.result;

                    img.src = url;

                }

            } catch (error) {

                file.select();

                var path = document.selection.createRange().text

                // 获取图片的本地路径

                img_div.style.filter =

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

                // 语法格式：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

                // enabled：可选项，布尔值(Boolean)。设置或检索滤镜是否激活。 true：默认值。滤镜激活。 false：滤镜被禁止。

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

                // 1）crop：剪切图片以适应对象尺寸。

                // 2）image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

                // 3）scale：缩放图片以适应对象的尺寸边界。

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

            }

        }

    </script>

</body>

</html>

图片上传预览，兼容IE的更多相关文章

  1. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  2. Javascript之图片上传预览

    使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...

  3. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  4. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  5. html,图片上传预览，input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  6. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  7. Jquery图片上传预览效果

    uploadPreview.js jQuery.fn.extend({ uploadPreview: function (opts) { var _self = this, _this = $(thi ...

  8. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

  9. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

随机推荐

  1. 动态加载与插件系统的初步实现（三）：WinForm示例

    代码文件在此Download,本文章围绕前文所述默认AppDomain.插件容器AppDomain两个域及IPlugin.PluginProvider.PluginProxy3个类的使用与变化进行. ...

  2. parewise算法性能优化

    在<接口自动化测试框架-AIM>这篇博客中,提到了parewise算法. 这次对其进行性能优化,共3点. 一. 因为笛卡尔积和两两拆分,是有序的. 就保证了两两拆分后的每列都是相同位置的元 ...

  3. 关于摄像头PCB图设计经验谈

    摄像头PCB设计,因为客观原因等.容易引起干扰这是个涉及面大的问题.我们抛开其它因素,仅仅就PCB设计环节来说,分享以下几点心得,供参考交流: 1.合理布置电源滤波/退耦电容:一般在原理图中仅画出若干 ...

  4. 《杜增强讲Unity之Tanks坦克大战》5-子弹

    5 子弹 本节的任务是创建子弹的Prefab   image 首先从Model/Shell找到子弹的模型,拖入Hierarchy中,添加刚体组件,所有属性默认值. 添加Capsule Collider ...

  5. vue处理循环列表动态数据问题

    调用方法:Vue.set( target, key, value ) target:要更改的数据源(可以是对象或者数组) key:要更改的具体数据 value :重新赋的值 <!DOCTYPE ...

  6. 《Redis设计与实现》阅读笔记（二）--简单动态字符串

    简单动态字符串 Redis只在一些无需对字符串进行修改的地方使用C字符串,大部分时候使用简单动态字符串(simple dynamic string, SDS),字符串的抽象类型.二进制安全,可以存放任 ...

  7. vue 自定义全局按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...

  8. IIS6/IIS7环境下实现支持mp4视频随意拖动、预览播放、边下载边播放

    前几天,一客户需要在IIS环境下实现MP4视频可以随意拖动观看,边下载边播放.一看这要求,IIS本身是无法实现,想着应该需要用插件,于是GG一番,还真找到这样的插件,此组件为H264-Streamin ...

  9. 半年收入超2亿RMB 独立游戏开发者的艰苦创业路

    一款叫做<监狱建筑师>的模拟经营游戏,目前在Steam平台获得了3000万美元(近2亿元)以上的收入.这款游戏由英国独立工作室Introversion Software发布,而团队最困难的 ...

  10. Tree - AdaBoost with sklearn source code

    In the previous post we addressed some issue of decision tree, including instability, lack of smooth ...