<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();" />
第二种方式
function setImagePreview(a,b) {
var url ='';
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
url = document.getElementById(a).value;
} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
url = window.URL.createObjectURL(document.getElementById(a).files.item(0));
}
var imgPre = document.getElementById(b);
imgPre.src = url;
}
浏览器 本地预览图片 window.url.createobjecturl的更多相关文章
-
本地预览图片html和js例子
本地预览图片html和js例子,直接上代码吧. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ...
-
FileReader本地预览图片
<body> <p><label>请选择一个图像文件:</label><input type="file" id=" ...
-
js 本地预览图片和得到图片实际大小
//填充预览图片 function adpter(file, upfile) { var imgName = new Date().getTime() + file.name.substr(file. ...
-
js在本地预览图片
移动web <body> <form enctype="multipart/form-data" name="form1"> 上传文件: ...
-
H5实现本地预览图片
我们使用H5可以很容易的实现图片上传前对其进行预览的功能 Html代码如下: <!DOCTYPE html> <html lang="en"> <he ...
-
js本地预览图片
废话不说 直接上代码 <script type="text/javascript" src="http://code.jquery.com/jquery-late ...
-
Thinkphp5+plupload图片上传功能,支持实时预览图片。
今天和大家分享一个国外的图片上传插件,这个插件支持分片上传大文件.其中著名的七牛云平台的jssdk就使用了puupload插件,可见这个插件还是相当牛叉的. 这个插件不仅仅支持图片上传,还支持大多数文 ...
-
js图片前端预览之 filereader 和 window.URL.createObjectURL
//preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...
-
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
-
Linux底下的第一个C程序
首先保证你的Linux底下安装了GCC,假如没有安装GCC的话请参考: http://www.cnblogs.com/aspirant/p/3544398.html 假如输入 gcc -v 不再是co ...
-
hdu 4628 Pieces
http://acm.hdu.edu.cn/showproblem.php?pid=4628 状态压缩DP 时间复杂度应该是 16*(2^32) 但是运行时要远小于这个数 所以加一定剪枝就可以过 代码 ...
-
AngularJS(10)-数据验证
AngularJS 表单和控件可以提供验证功能,并对用户输入的非法数据进行警告.客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的. <!DOCTYPE html> & ...
-
在SQL中使用PL/SQL函数存在的问题
-----------------------------Cryking原创------------------------------ -----------------------转载请注明出处, ...
-
C#字符串处理 及字符串格式化
本文来自:http://www.cnblogs.com/xuerongli/archive/2013/03/23/2976669.html string字符串是char的集合,而char是Unicod ...
-
IE 调试JS加断点不管用 增加debugger
ie按F12添加断点调试js不管用 有个方法在你想加断点前面加debugger,再调试就管用了
-
非常有用的css使用总结
积小流以成江海,很多东西你不总结就不是你的东西 常用css总结: /*设置字体*/ @font-face { font-family: 'myFont'; src: url('../font/myFo ...
-
CentOS下nginx php mysql 环境搭建
CentOS下搭建PHP运行环境. 首先是在虚拟机上装好一个命令行的CentOS,如果只是弄服务器的话,不要装图形界面,会比较卡. 一.安装编译工具及库文件 yum -y install make z ...
-
环绕声5.1ch
简单说5.1ch就是数字影院中的音频输出术语,环绕立体声输出,让人有置身电影院的感觉,由五个音箱(两个主音箱.两个环绕箱.一个中置箱)+一个低音炮组成 5.1环绕声包括了5个全频带声道和 1个低频效果 ...
-
浏览器和对象的dom属性
1 DOM对象:var obj=document.getElementById('*'); obj.scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会 ...