浏览器 本地预览图片 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('您上传的图片格式不正确,请重新选择!');
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上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
- Orchard运用 - 在页面每篇随笔添加编辑链接
今天继续捣鼓Orchard系统,在此分享一个小技巧,如何在页面每个随笔添加编辑链接,这样方便管理员直接点击进去编辑内容.是的,只对管理员可见. 话说这一个特性一开始是默认启用并集成在核心实现中的,后来 ...
- C#视频播放器【转】
1对于视频播放器来说,最重要的功能,莫过于播放视频文件了这就要用到VS自带的控件——Windows Media Player windows media player 将Windows Media P ...
- Vue使用中遇到问题汇总(三)
1.后台session过期前端跳转到登录页面 axios 拦截器 可以拦截请求和返回,对于失效的情况后端可以返回一个状态码,如401, 使用axios拦截时判断是401,则跳转到指定页面,如login ...
- C++primer习题--第1章
本文地址:http://www.cnblogs.com/archimedes/p/cpp-primer-chapter1-ans.html,转载请注明源地址. [习题 1.3] 编一个程序,在标准输出 ...
- boost.asio学习笔记一、linux下boost库的安装
欢迎转载,转载请注明原文地址:http://blog.csdn.net/majianfei1023/article/details/46761029 学习开源库第一步就是编译安装好库,然后执行成功一个 ...
- 使用mocha测试
学习了MOCHA官网的示例,将学习成果记录一下.[原文+例子:使用mocha测试] mocha是什么 Mocha是一个跑在node和浏览器上的javascript测试框架,让异步测试变得简单有趣, 并 ...
- Linux 监测内存常用的工具sar free vmstat
Linux 检测内存常用的工具sar free vmstat free 内存统计信息解释 total 内存总量used 内存使用的大小free 内存剩余大小shared 共享内存大小buffers 块 ...
- Hibernate持久化对象的状态
1. 站在持久化的角度 , Hibernate 把对象分为 4 种状态 : 持久化状态, 暂时状态, 游离状态(脱管状态) , 删除状态.Session 的特定方法能使对象从一个状态转换到还有一个状态 ...
- 【BIRT】01_在win10上安装BIRT
环境:windows 10 64位 安装文件:链接:https://pan.baidu.com/s/1vYGbB0D1QeQ923oIIdoI9Q 密码:qcde 说明:安装文件也可以自己去官网下载, ...
- js判断浏览器是否关闭
http://www.blogjava.net/wyz191/archive/2008/12/08/245089.html JS window.onunload=function(){ ...