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

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

  1.  

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. 《深入理解Spark-核心思想与源码分析》(一)总体规划和第一章环境准备

    <深入理解Spark 核心思想与源码分析> 耿嘉安著 本书共计486页,计划每天读书20页,计划25天完成. 2018-12-20   1-20页 凡事豫则立,不豫则废:言前定,则不跲:事 ...

  2. Mapper动态代理开发

    在开发的过程中只需要写Dao层的借口,无需写其实现类,实现类有框架自己补充. 框架是根据mapper文件自动补充的,因此需要满足下面四个条件 Mapper接口开发需要遵循以下规范: Mapper.xm ...

  3. RequireJS 2.0初探

    就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...

  4. iOS 多线程之NSOperation篇举例详解

    这篇博客是接着总篇iOS GCD NSOperation NSThread等多线程各种举例详解写的一个支篇.总篇也包含了此文的链接.本文讲解的知识点有NSBlockOperationClick,队列, ...

  5. Linux发布Tomcat Web项目

    1.打包项目,项目右键–>Export –> WAR file 2.将.war文件放到tomcat下的webapps下.重启tomcat即可. ps  afux    —  查看进程 ki ...

  6. Android Studio 下使用git -- 个人,本地版本控制

    第一步:下载安装git 下载地址 : https://git-scm.com/downloads 第二步:Android Studio 下配置git路径. 配置之后,Test弹出如下成功的提示即可. ...

  7. Delphi Delay 延时计数的功能。 下面的方法都是思路,但是没有用在项目上

    procedure Tfrm_InstrumentControl.aa;var CurLength: Word; vTimeLength: Word;begin Screen.Cursor := cr ...

  8. VR/AR工作原理、目前存在的技术问题

    http://blog.csdn.net/liulong1567/article/details/50686558 摘要: 这些挑战,每一个都还需要很多努力才能解决.目前它们很多都还不到量变(只是需要 ...

  9. python 下载小说

    以下载官场风月小说为例: 具体代码: # coding=utf-8 import os import re from selenium import webdriver from selenium.c ...

  10. 转:TensorFlow和Caffe、MXNet、Keras等其他深度学习框架的对比

    http://geek.csdn.net/news/detail/138968 Google近日发布了TensorFlow 1.0候选版,这第一个稳定版将是深度学习框架发展中的里程碑的一步.自Tens ...