$("#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. IOS,苹果内购和添加广告

    内购——应用内购买 通过苹果应用程序商店有三种主要赚钱的方式: 直接收费(与国内大部分用户的消费习惯相悖) 广告(降低用户体验 应用程序名称带Lite可以添加广告) O2O -> Online推 ...

  2. js 鼠标左键拖动滚动

    鼠标左键拖动滚动 原作者: http://blog.csdn.net/lisatisfy/article/details/6606026 本文在源代码的基础上 增加支持水平滚动 的功能 html &l ...

  3. Word里如何打出带有上下横杠的大写字母i

    换成新罗马就行了.

  4. [Android Memory] Android 的 StrictMode

    android的2.3 之后引入的StrictMode 对网络的访问做了限制啊. public void onCreate() { if (DEVELOPER_MODE) { StrictMode.s ...

  5. [转载]使用32位64位交叉编码混淆来打败静态和动态分析工具 - wildsator

    0×00 摘要 混淆是一种能增加二进制分析和逆向工程难度与成本的常用技术.主流的混淆技术都是着眼于使用与目标CPU相同的机器代码,在相同的处理器模式下,隐藏代码并进行控制.本文中引入了一种新的混淆方法 ...

  6. iptables配置

    iptables -F iptables -P INPUT DROP iptables -P FORWARD DROP iptables -A INPUT -m state --state ESTAB ...

  7. ActiveMQ实现负载均衡+高可用部署方案 -转载

    转:http://www.open-open.com/lib/view/open1400126457817.html 一.架构和技术介绍 1.简介 ActiveMQ 是Apache出品,最流行的,能力 ...

  8. 倍福TwinCAT(贝福Beckhoff)应用教程11.1 TwinCAT应用小程序1 贝福IO模块介绍

    EL1002,EL1004,EL1008都是数字输入模块(2个点,4个点,8个点),输入高的范围是15V到30V,低的范围是-3V到5V         EL2002,EL2004,EL2008都是数 ...

  9. UGUI 实现界面 渐隐渐现 FadeIn/Out 效果

    孙广东  2015.7.10 事实上熟悉NGUI的人,应该知道  实现渐隐渐现 FadeIn/Out 效果是非常方便的,由于父对象 的 改变会自己主动影响到子对象. 比方 UIWidget.UIPan ...

  10. lodash 类型判断

    1.isArray _.isArray(value) 检查 value 是否是 Array 类对象. 2.isElement _.isElement(value) 检查 value 是否是可能是 DO ...