本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结


Posted in Javascript onMarch 25, 2013

最近在Web项目开发过程中遇到的本地图片预览的需求,虽然最后因为其他原因没能使用,但是也算有些了解,整理出来。

这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究。

总结一下就是
IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo:

<html> 
<head> 
<script src="http://deepliquid.com/projects/Jcrop/js/jquery.min.js"></script> 
</head> 
<body> 
<input type="file" id="picture" name="picture" size="35" value="" onchange="setImg(this)"/> 
<div id="preview_fake" style="margin-left: 50px"> 
</div> 
<img id="preview_size_fake"/> 
<style type="text/css"> 
#preview_fake{ 
/* 该对象用于在IE下显示预览图片 
*/ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); 
} 
#preview_size_fake{ 
/* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 
*/ 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); 
visibility:hidden; 
} 
</style> 
<script type="text/javascript"> 
function setImg(obj){ 
if( !obj.value.match( /.jpg|.gif|.png|.bmp/i ) ){ 
alert('图片格式无效!'); 
return false; 
} 
$("#preview_fake").empty(); 
var img = document.createElement("img"); 
img.setAttribute("src", ""); 
img.setAttribute("id", "preview"); 
document.getElementById("preview_fake").appendChild(img); 
if($.browser.msie){ 
if($.browser.version == 6.0){ 
$("#preview").attr("src",obj.value); 
}else{ 
var objPreview = document.getElementById('preview' ); 
var objPreviewFake = document.getElementById('preview_fake' ); 
var objPreviewSizeFake = document.getElementById('preview_size_fake' ); 
obj.select(); 
var imgSrc =document.selection.createRange().text; 
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; 
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src= imgSrc; 
autoSizePreview(objPreviewFake,objPreviewSizeFake.offsetWidth,objPreviewSizeFake.offsetHeight ); 
objPreview.style.display ='none'; 
} 
} 
if($.browser.mozilla){ 
$("#preview").attr("src",obj.files[0].getAsDataURL()); 
} 
if($.browser.opera){ 
alert("暂时不支持Opera浏览器"); 
} 
if($.browser.safari){ 
alert("暂时不支持Safari浏览器"); 
} 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
javascript事件冒泡实例分析
May 13 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
原生js实现分页效果
Sep 23 Javascript
JS上传前预览图片实例
Mar 25 #Javascript
js实现杯子倒水问题自动求解程序
Mar 25 #Javascript
js实现上传图片之上传前预览图片
Mar 25 #Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 #Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 #Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 #Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 #Javascript
You might like
php empty函数 使用说明
2009/08/10 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
node.js中的fs.chmod方法使用说明
2014/12/18 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
使用原生js编写一个简单的框选功能方法
2019/05/13 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue或react项目生产环境去掉console.log的操作
2020/09/02 Javascript
python中学习K-Means和图片压缩
2017/11/20 Python
python清理子进程机制剖析
2017/11/23 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
TensorFlow实现checkpoint文件转换为pb文件
2020/02/10 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
python Cartopy的基础使用详解
2020/11/01 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
介绍一下write命令
2014/08/10 面试题
学历公证委托书
2014/04/09 职场文书
先进事迹演讲稿
2014/09/01 职场文书
给学校的建议书400字
2015/09/14 职场文书
2016银行求职自荐信
2016/01/28 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
python保存图片的四个常用方法
2022/02/28 Python