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"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
随机推荐
- webRTC中音频相关的netEQ(一):概述
上篇文章(语音通信中终端上的时延(latency)及减小方法)说从本篇开始会切入webRTC中的netEQ主题,netEQ是webRTC中音频技术方面的两大核心技术之一(另一核心技术是音频的前后处理, ...
- 报错:Heartbeating to master:7182 failed.
报错背景: cloudera-scm-agent 可以启动并且存活,但是jps没有进程. 报错现象: 查看报错日志:/opt/cm-5.15.1/log/cloudera-scm-agent/clou ...
- Neject 在MVC框架中使用
Neject 开始是用3.3.0.0,不能自动生成NinjectWebCommon文件,测试了很久发现,是版本的问题 ,后来用Nuget卸载后,重新下了Ninject,Ninject.Web.Comm ...
- Monkey相关参数 笔记
Monkey相关参数 笔记 Monkey是Android系统自带的一个命令行工具,可运行在模拟器里或实际设备中. Monkey可以向被测试的应用程序发送伪随机的用户事件流(如按键.触屏.手势等),实 ...
- 跨年呈献:HP-Socket for Linux 1.0 震撼发布
三年,三年,又三年,终于,终于,终于不用再等啦!就在今天,HP-Socket for Linux v1.0 震撼发布!还是一样的接口,一样的高效,一样的简便,一样的味道. HP-Socket ...
- win10系统搜索不到某些老式打印机
问题: win10系统在设置选项里面搜索打印机,却找不到打印机. 百度了一下: 基本说的是驱动问题. 解决方法: 1.下载lansee局域网扫描软件 2.打开嗅探工具点击开始 3.搜索出来之后,会在共 ...
- String 相关
1. 输出结果为 true,"hello" + 1 在编译期间就被优化成了 "hello1",因此在运行期间,变量 a 和变量 b 指向的是同一个对象 Stri ...
- JavaScript数组方法--reduce、reduceRIght、reverse
今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...
- vue项目中如何使用多语言(vue-i18n)
因项目需要,需要使用多语言,特此记录使用方法. 第一步:安装vue-i18n npm install vue-i18n 第二步:在生成的i18n文件夹中的index.js里引入vue-i18n 第三步 ...
- java 继承内存分配
今天,复习的是继承的内存分配.我们知道,Java中内存可以初略分为堆.栈.方法区. package sort; class Person{ public int age; public String ...