上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> <asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />
<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>
此js解决360浏览器显示图片问题。因为360浏览器6.2用的是Chrome的内核,而
window.URL.createObjectURL(docObj.files[0]);
只有在火狐下才认得到,chrome中不认识window.URL.createObjectURL,所有用Safari的window.webkitURL.createObjectURL
您可能感兴趣的文章:
相关推荐
卖5分,亲自测试通过哦,亲。
网上找到的一份文件上传前预览的代码,转自JavaScript 图片的上传前预览(兼容所有浏览器) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8...
想尽多种办法让用户在网站上的操作更加舒适、人性化,就像这个图片预览小功能一样,不要说它很小,但是它发挥的作用很明显,在上传前预览一下图片,以免选择了错误的文件,上次写的无刷新文件上传系统最初的目的就是...
里面有好几个实例 实现图片上传及时预览功能,兼容各种浏览器及版本
另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高。 这里介绍...
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考,具体如下: 下载DEMO:https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说,要实现图片预览非常简单: 1、...
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
1. IE input type=file的图片预览要用IE的filter css progid:DXImageTransform.Microsoft.AlphaImageLoader chrome/firefox则用File api的file reader 2. 图片旋转,IE用progid:DXImageTransform.Microsoft....
layer是一款近年来备受青睐的web弹层组件,它具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
主要介绍了JS实现获取图片大小和预览的方法,结合完整实例形式分析了javascript针对不同浏览器处理图片上传与预览等操作的相关实现技巧,需要的朋友可以参考下
其实这并不是一个非常难的课题,单独拿出来的原因还是浏览器兼容问题: 代码如下:[removed] // 说明:Javascript 中阻止浏览器默认操作 // 作者:John Resig function stopDefault( e ) { // Prevent the default ...
傲游3浏览器是国内唯一具有独立内核的桌面浏览器产品,首创双核浏览模式,在安全、快速的基础上,保证了对网银、网购类网站的兼容性。傲游3浏览器内置云端广告过滤系统,强大而易用,确保用户在浏览网页时不受任何...
104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐...
PhotoSwipe图片全屏预览插件(移动、PC都可用),PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
用于把图片上传到服务器之前能够在本地预览图片。兼容IE6+、FF、Chrome浏览器。 使用说明: 1.首先页面需要引入jQuery库,然后引入uploadPreview.js,例如如下代码: [removed][removed] [removed][removed] 2.然后在...
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 特征: 1、多文件上传: 允许一次选择...
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....