功能描述
通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+、Chrome、Firefox)。
效果示例
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
原作者:微米博客
如若引用 请注明出处
分享到:
相关推荐
上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下
卖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、...
方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高。 这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法 html <div class="reHead"> <P class="content-
layer是一款近年来备受青睐的web弹层组件,它具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
主要介绍了兼容最新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....
主要介绍了JS实现获取图片大小和预览的方法,结合完整实例形式分析了javascript针对不同浏览器处理图片上传与预览等操作的相关实现技巧,需要的朋友可以参考下
vue使用lodop打印控件实现浏览器兼容打印的方法 前言 此控件直接进行打印底部会有水印,通过官网购买可以解决; 如不想购买,可先执行预览,弹出预览框进行打印; 需要用到的js文件和api文档附后,请注意查看。 ...
PhotoSwipe图片全屏预览插件(移动、PC都可用),PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad、黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
其实这并不是一个非常难的课题,单独拿出来的原因还是浏览器兼容问题: 代码如下:[removed] // 说明:Javascript 中阻止浏览器默认操作 // 作者:John Resig function stopDefault( e ) { // Prevent the default ...
104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐...
傲游3浏览器是国内唯一具有独立内核的桌面浏览器产品,首创双核浏览模式,在安全、快速的基础上,保证了对网银、网购类网站的兼容性。傲游3浏览器内置云端广告过滤系统,强大而易用,确保用户在浏览网页时不受任何...
产生的代码兼容IE,FireFox等常用浏览器。本软件可免费使用和转载,但严禁用于商业用途。 本软件不同于网络上已有的同类软件,现有的都是网页版的,本软件是完全的绿色软件,下载后直接运行即可,界面很简单。包括...
jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。 特征: 1、多文件上传: 允许一次选择...
用于把图片上传到服务器之前能够在本地预览图片。兼容IE6+、FF、Chrome浏览器。 使用说明: 1.首先页面需要引入jQuery库,然后引入uploadPreview.js,例如如下代码: [removed][removed] [removed][removed] 2.然后在...