window.url.createobjecturl 兼容多种浏览器(IE,google,360,Safari,firefox)

<script type="text/javascript">
function setImagePreview() {
var docObj = document.getElementById("ctl00_ContentMain_file_head");
var fileName = docObj.value;
if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
alert(‘您上传的图片格式不对。请又一次选择!‘);
return false;
} 

var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = ‘block‘;
imgObjPreview.style.width = ‘63px‘;
imgObjPreview.style.height = ‘63px‘;
//imgObjPreview.src = docObj.files[0].getAsDataURL();
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
}
else {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
} else {
//IE下。使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "63px";
localImagId.style.height = "63px";
//图片异常的捕捉,防止用户改动后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不对。请又一次选择!

");
return false;
}
imgObjPreview.style.display = ‘none‘;
document.selection.empty();
}
return true;
} 

</script> 

<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div>

<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />

版权声明:本文博主原创文章,博客,未经同意不得转载。

时间: 2024-10-25 04:48:25

window.url.createobjecturl 兼容多种浏览器(IE,google,360,Safari,firefox)的相关文章

浏览器 本地预览图片 window.url.createobjecturl

第一种方式 <script type="text/javascript"> function setImagePreview() { var docObj = document.getElementById("ctl00_ContentMain_file_head"); var fileName = docObj.value; if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) { alert('您上传的图片格式不正

OPENCART之兼容多种浏览器的加入收藏夹扩展功能插件(CROSS-BROWSER BOOKMAR

OPENCART之兼容多种浏览器的加入收藏夹扩展功能插件(CROSS-BROWSER BOOKMARK) 由于安全原因,谷歌浏览器chrome不允许使用javascript代码加入收藏夹,本插件在谷歌浏览器浏览网站时,给出按Ctrl + D来收藏您的网址. 特色: 1. 适用于多种浏览器版本: IE5+/Win, Firefox, Netscape 6+, Opera 7+, Safari, Google Chrome for Windows, Konqueror 3, IE5/Mac, iCa

html5的FormData对象和input的file属性以及window.URL.createObjectURL( ) 方法(转载)

/** FormData ==>表单数据 能自动把表单数据拼接打包 当ajax发送数据时,发送打包的数据; 还可以使用FormData对象的append(key,value)添加数据 FormData还可以自动帮忙打包文传送件数据,后台通过$_FILES数组接收 说明FormData对象既可以打包发送表单的数据,也可以手动append数据 注意,input Dom对象有一个files属性 十一哥文件数组 **/ <!doctype html> <html> <head&

兼容多种浏览器的渐变颜色背景

经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的 CSS,太低版本的浏览器只能使用图片做背景. 下面是当前五大浏览器对 gradient 的支持 Css代码   <style type="text/css" media="screen"> #gradient { width: 200px; height: 200px; /* 如果浏览器不支持渐变,使用图像作为背景 */ backg

js图片前端预览之 filereader 和 window.URL.createObjectURL

1 //preview img 2 document.getElementById('imgFile').onchange = function(e){ 3 common.showLoading(); 4 activateButton(); 5 var ele = document.getElementById('imgFile').files[0]; 6 7 8 var fr = new FileReader(); 9 fr.onload = function(ele){ 10 11 var

js本地图片预览代码兼容所有浏览器

html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id="imgHeadPhoto" src="www.niyuewo.com" style="width: 160px; height: 170px;border: solid 1px #d2e2e2;" /> </div> <a

URL.createObjectURL和URL.revokeObjectURL

一.URL.createObjectURL URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象. 语法: objectURL = URL.createObjectURL(blob || file); 参数: File对象或者Blob对象 这里大概说下File对象和Blob对象: File对象,就是一个文件,比如我用input type="file&q

用window.URL全局对象

1. URL.createObjectURL() 静态方法会创建一个 DOMString,它的 URL 表示参数中的对象.这个 URL 的生命周期和创建它的窗口中的 document 绑定.2.在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过.当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放.浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状

js的window.onscroll事件兼容各大浏览器

为窗口添加滚动条事件其实非常的简单, window.onscroll=function(){}; 注意在获取滚动条距离的时候 谷歌不识别document.documentElement.scrollTop,必须要加上document.body.scrollTop:即 var scrolltop=document.documentElement.scrollTop||document.body.scrollTop; 这样才能兼容各个浏览器! <!DOCTYPE html PUBLIC "-/