功能描述
通过 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.然后在...