IE浏览器上传图片预览兼容(IE 7 8 9 10 11)
- $("#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)的更多相关文章
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- js兼容火狐显示上传图片预览效果
js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...
- JavaScrip 原生多文件上传及预览 兼容多浏览器
JavaScrip 原生多文件上传及预览 兼容多浏览器 html代码块 <div class="container"> <label>请选择一个图像文件:& ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- HTML5上传图片预览
<!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...
- Node.js + gulp 合并静态页模版,文件更新自动热重载。浏览器可预览
github地址:https://github.com/Liaozhenting/template 使用的是ejs的语法.其实你用什么文件后缀都可以,都是按ejs来解析. 模板文件放在componen ...
- HTML5上传图片预览功能
HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
随机推荐
- 《深入理解Spark-核心思想与源码分析》(一)总体规划和第一章环境准备
<深入理解Spark 核心思想与源码分析> 耿嘉安著 本书共计486页,计划每天读书20页,计划25天完成. 2018-12-20 1-20页 凡事豫则立,不豫则废:言前定,则不跲:事 ...
- Mapper动态代理开发
在开发的过程中只需要写Dao层的借口,无需写其实现类,实现类有框架自己补充. 框架是根据mapper文件自动补充的,因此需要满足下面四个条件 Mapper接口开发需要遵循以下规范: Mapper.xm ...
- RequireJS 2.0初探
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
- iOS 多线程之NSOperation篇举例详解
这篇博客是接着总篇iOS GCD NSOperation NSThread等多线程各种举例详解写的一个支篇.总篇也包含了此文的链接.本文讲解的知识点有NSBlockOperationClick,队列, ...
- Linux发布Tomcat Web项目
1.打包项目,项目右键–>Export –> WAR file 2.将.war文件放到tomcat下的webapps下.重启tomcat即可. ps afux — 查看进程 ki ...
- Android Studio 下使用git -- 个人,本地版本控制
第一步:下载安装git 下载地址 : https://git-scm.com/downloads 第二步:Android Studio 下配置git路径. 配置之后,Test弹出如下成功的提示即可. ...
- Delphi Delay 延时计数的功能。 下面的方法都是思路,但是没有用在项目上
procedure Tfrm_InstrumentControl.aa;var CurLength: Word; vTimeLength: Word;begin Screen.Cursor := cr ...
- VR/AR工作原理、目前存在的技术问题
http://blog.csdn.net/liulong1567/article/details/50686558 摘要: 这些挑战,每一个都还需要很多努力才能解决.目前它们很多都还不到量变(只是需要 ...
- python 下载小说
以下载官场风月小说为例: 具体代码: # coding=utf-8 import os import re from selenium import webdriver from selenium.c ...
- 转:TensorFlow和Caffe、MXNet、Keras等其他深度学习框架的对比
http://geek.csdn.net/news/detail/138968 Google近日发布了TensorFlow 1.0候选版,这第一个稳定版将是深度学习框架发展中的里程碑的一步.自Tens ...