JavaScript图片上传前的图片预览功能
JS代码:
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) { //HTML5实现预览,兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) { //ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else { //ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1) {
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
}
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
newPreview.style.border = "solid 1px #d2e2e2";
}
document.getElementById("divfocus").focus(); //解决document.selection.createRange()拒绝访问的问题
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; //document.selection.createRange().text
var tempDivPreview = document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none"; }
} else if (browserVersion.indexOf("FIREFOX") > -1) { //firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) { //firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else { //firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}
前台页面:
<div style="width: 190px;" id="divfocus">
<div runat="server" id="divPreview" class="divProImg">
<img id="txImg" class="txImg" runat="server" onclick="upclick();" src="../skin/default/images/Default/undefined1.png" />
</div>
<asp:FileUpload ID="upLoadImage" runat="server" onchange="PreviewImage(this,'cphContent_txImg','cphContent_divPreview')"
CssClass="fuhide" />
<input runat="server" id="txtImg" type="text" style="display: none" />
</div>
遇到问题:ie8及以下document.selection.createRange()拒绝访问,导致图片无法预览的问题
参考资料:http://blog.csdn.net/yiluoak_47/article/details/7869154
最近发现,在IE9下,公司网站的本地图片预览都无法正常显示,经过测试发现,原因在于IE9下无法获取file控件的文件路径。 以前的代码如下: var strPic = fileImg.value; if ($.ie && $.browser.version > 6) {
fileImg.select();
strPic = document.selection.createRange().text;
document.selection.empty(); } 如果strPic不为空,则使用滤镜预览。 以上代码在IE 6 7 8均正常使用,在IE9下,document.selection.createRange()拒绝访问,看来安全性有所提高。 最后测试发现,在IE9下,如果file控件获得焦点,则document.selection.createRange()拒绝访问, 因此,只需要在fileImg.select()后面加一句fileImg.blur()即可。 但是,如果当前页面被嵌在框架中,则fileImg.blur()之后,file控件中原本被选中的文本将会失去选中的状态,因此,不能使用fileImg.blur()。 可以让当前页面上的其他元素,如div,button等获得焦点即可,如div_view.focus()。 注意,如果是div,则要确保div有至少1像素的高和宽,方可获得焦点。 目前在IE9中测试,一切正常。
解决方案:如上,虽然我的是ie9能正常使用,ie78不行,但是获取焦点后同样解决了该问题
JavaScript图片上传前的图片预览功能的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- 前端的图片压缩image-compressor(可在图片上传前实现图片压缩)
https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...
- atitit.javascript js 上传文件的本地预览
atitit.javascript js 上传文件的本地预览 1. .URL.createObjectURL 1 1.1. 吊销所有使用 URL.createObjectURL 而创建的 URL,以 ...
- html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- jq实现上传头像并实时预览功能
效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- Chromium(Chrome) frame structure detail
1. Chromium VS Chrome Chromium is an open-source Web browser project started by Google, to provide t ...
- ASP.NET页面跳转的三大方法详解
ASP.NET页面跳转有什么方法呢?,现在给大家介绍三种方法,他们的区别是什么呢?让我们开始吧: ASP.NET页面跳转1.response.redirect 这个跳转页面的方法跳转的速度不快,因为它 ...
- 简单快速的Android打渠道包的方法
APK其实就是ZIP的格式,所以,解压apk后,会看到里面有个META-INF目录. 思路:由于META-INF目录并不会影响到APK的签名和运行,所以我们可以在META-INF目录里添 ...
- 更改/var/log/messages默认权限
问题描述: 操作系统:redhat 6.5 因为开发人员和运维人员平时在应用出现bug时,会需要看/var/log/message日志,但是默认权限为600,因此除了root用户都无法读取,现需要把每 ...
- python之路——25
复习 1.继承 表示什么是什么的关系 1.单继承 1.先抽象,再继承 2.子类没有的名字,调用父类 3.类中使用self,看清楚self指向谁 2.多继承 1.新式类和经典类 1.新式类:广度优先 经 ...
- Odoo-10开发环境配置与测试
Odoo是使用Python写的开源ERP软件,这几年比较火.内部有实施能力的,这个软件还是很不错的.总体来说,国外的这类软件,更多是在做平台(比如微软的AX.SharePoint.SAP等)平台本身具 ...
- realm清空所有数据库的数据
/* *清空数据库 */ public int clearDatabase() { Realm realm = Realm.getDefaultInstance(); try { realm.begi ...
- 图片转成base64位 页面中图片展示
<img src="data:image/gif;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABG ...
- 使用Git将本地文件提交到远程仓库
一 操作准备条件: git远程仓库已经建好了,本地文件已经存在了,现在要将本地代码推到git远程仓库保存. 解决办法如下: 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以 ...
- react-native shadow失效
做边框阴影,但是有时候会失效,内容产生阴影,而边框无效,今天发现了原因,没错,就是没有设置背景颜色导致的.如图