$("#file_upload").change(function () {
var $file = $(this);
var fileObj = $file[];
var windowURL = window.URL || window.webkitURL;
var dataURL;
var $img = $("#preview");
if (fileObj && fileObj.files && fileObj.files[]) {
dataURL = windowURL.createObjectURL(fileObj.files[]);
$img.attr('src', dataURL);
} else { dataURL = $file.val();
// $img.css("filter",'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="' + dataURL + '")');
// var imgObj = document.getElementById("preview");
// imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")";
// imgObj.style.width = "48px";
// imgObj.style.height = "48px";
var imgObj = document.getElementById("preview"); // 两个坑:
// 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性在加入,无效;
// 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
} }); 前端代码:

    <input id="file_upload" type="file" />
    <div class="image_container" id="previewDIV">
      <img id="preview" width="200" height="200" alt="没有图片">
    </div>

 

IE浏览器上传图片预览兼容(IE 7 8 9 10 11)的更多相关文章

  1. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  2. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  3. JavaScrip 原生多文件上传及预览 兼容多浏览器

    JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...

  4. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  5. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  6. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  7. Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览

    github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...

  8. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  9. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

随机推荐

  1. yii2.0权限控制 ACF权限

    ACF是一种通过yii\filters\AccessControl类来实现的简单授权 有两种角色 ?:未经认证的游客用户 @:已认证的用户 ACF可同过对角色设置权限控制访问 1)记得引入yii\fi ...

  2. js 的 slice方法

    slice() 方法可从已有的数组中返回选定的元素. string.slice( beginslice [, endSlice] ); 下面是参数的详细信息: beginSlice : 从零开始的索引 ...

  3. Python+C混编

    Python最慢!C最快!Python+C混编?结果可想而知! 樱桃种子 百家号04-1712:11 共享库 使用C语言编译产生共享库,然后python使用ctype库里的cdll来打开共享库. 举例 ...

  4. 【Hadoop】HDFS原理、元数据管理

    1.HDFS原理 2.元数据管理原理

  5. APK大小的瘦身的总结:

    首先是看了博客:http://blog.csdn.net/sw950729/article/details/64919051 时.认为大神我就是马云飞写的非常有道理.全部自己就自己写了一遍.长话短说: ...

  6. JSONObject和JSONArray(json-lib-2.4)的基本用法

    json-lib-2.4是一个用于JSON和java对象间转换的第三方包,其jar和依赖包下载地址在:https://files.cnblogs.com/files/xiandedanteng/jso ...

  7. 【FAQ】Ubuntu环境下ant编译android代码问题

    在Ubuntu14.04环境下,编译android程序时候,运行ant debug的时候出现如下异常:

  8. 利用 MySQL 技能学习 DB2 Express: DB2 与 MySQL 的管理任务和基本任务

    原文地址:http://www.ibm.com/developerworks/cn/data/library/techarticles/dm-0602tham2/index.html 简单介绍 管理不 ...

  9. WP8 NavigationInTransition实现页面切换效果

    NavigationInTransition这个是实现页面切换效果,而且没控件来拖,要自己手动写, 将App.xaml.cs中InitializePhoneApplication()函数里的RootF ...

  10. oracle闪回某个时间段的数据

    闪回2013-08-08 08:08:08的数据: insert into  table_1   select * from table_2 as of timestamp to_date('2013 ...