浏览器 本地预览图片 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) { // IEurl = document.getElementById(a).value;} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefoxurl = window.URL.createObjectURL(document.getElementById(a).files.item(0));} else if(navigator.userAgent.indexOf("Chrome")>0) { // Chromeurl = 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上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
随机推荐
- go语言基础之包和自定义包与main包
1.包 所有 Go 语言的程序都会组织成若干组文件,每组文件被称为一个包.这样每个包的代码都可以作为很小的复用单元,被其他项目引用. 一个包的源代码保存在一个或多个以.go为文件后缀名的源文件中,通常 ...
- 为什么Domain controller上的time synchronization非常重要?
虚拟机默认情况下所拥有的资源都是不同的, 比如说CPU clock. 在一个忙碌的系统中, 虚拟机甚至可能在很短的一段时间内被拒绝分配资源给它, 这种情况还可能发生在高系统负荷, VMotion, B ...
- input 输入框默认获得焦点
JavaScript实现默认焦点: 如下写<body>标签: <body onload="window.formLogin.user.focus()"> & ...
- 《java 语言程序设计》第2章编程练习
2.1 public class test { public static void main(String[] args) { Scanner input = new Scanner(System. ...
- 一致性哈希算法(Consistent Hashing) .
应用场景 这里我先描述一个极其简单的业务场景:用4台Cache服务器缓存所有Object. 那么我将如何把一个Object映射至对应的Cache服务器呢?最简单的方法设置缓存规则:object.has ...
- angularjs中ng-class的使用
1.方法一 通过数据的双向绑定(不推荐) <!DOCTYPE html> <html ng-app="myApp"> <head> <me ...
- UNIX网络编程读书笔记:readv和writev函数
这两个函数类似于read和write,不过readv和writev允许单个系统调用读入到或写出自一个或多个缓冲区.这些操作分别称为分散读(scatter read)和集中写(gather write) ...
- Unity发布各平台路径
#if UNITY_EDITOR string filepath = Application.dataPath + "/StreamingAssets"; #elif UNITY_ ...
- Java设计模式(二)-单例模式
单例模式建议保证某个对象仅仅仅仅有一个实例,当仅仅有一个对象来协调整个系统的操作时,在计算机系统中.线程池.缓存.日志对象.对话框.打印机.显卡的驱动程序对象常被设计成单例.总之,选择单例模式就是为了 ...
- ie 已限制此网页运行脚本或Active控件
ie 已限制此网页运行脚本或Active控件 CreateTime--2018年3月12日16:49:43 Author:Marydon 情景还原: 在本地调试html页,如果其中包含js或fla ...