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 ...
随机推荐
- cocos2d 文件系统使用文件内存映射性能对比
//cocos 修改代码 ..... //性能测试代码 extern "C" { #include <time.h> #include <stdlib.h> ...
- Java高级架构师(一)第30节:把应用部署到Linux服务器上
- Java高级架构师(一)第03节:多模块多Web应用合并War包
多模块.多Web应用合并war包 在日常的系统开发中,如果担心各个系统的资源同名覆盖,可以在总的War模块下放置一份最终的资源. 将版本号改成9.1.0.v20131115,ok 在Idea中的Mav ...
- [HTML/CSS]margin属性用法
概述 在一些小的项目中,前台样式还是需要自己来写的,这时候,margin在布局中还是有一定的地位的.上篇文章中介绍的盒子模型中,就有margin的存在. margin margin可以用来设置css块 ...
- oracle 11g jdbc jar包在哪个文件目录
一. 如果装了oracle数据库的话, 大致是这样的目录: D:\oracle\product\11.2.0\client_1\oui\jlib\classes12.jar 或者 D:\o ...
- C#之Raw Socket网络封包监视源码
大家可以建立一个Windows Form应用程序,在下面的各个文件中添加对应的源码: //RawSocket.csnamespace ReceiveAll{ using System; using S ...
- cdev结构体及其相关函数
一.在Linux2.6内核中一个字符设备用cdev结构来描述,其定义如下: struct cdev { struct kobject kobj; struct module *owner; //所属模 ...
- centos和ubuntu下pycharm无法输入中文的解决办法
编辑启动的脚本文件 vim /usr/bin/pycharm ubuntu下添加 export GTK_IM_MODULE=fcitx export QT_IM_MODULE=fcitx export ...
- 2017.11.21 查询某个字段为null的记录
注意,不使用 = null, 而是 is null. select fd_username, fd_tenantid, fd_validity from t_user WHERE fd_validit ...
- Alfresco 5.0.d 企业文档管理系统
Thanks for downloading Alfresco Community Edition. Your download should begin in three seconds. If i ...