本文不是讨论技术问题，只是将现有的关于图片预览方面的javascript 代码进行整理，希望对那些不知道这方面知识的朋友有些帮助
问题原因
在ie6我们要预览一个本地文件只需要这样既可实现：
<html>
<head>
<script>
//预览照片
function previewPhoto(){
var picsrc=document.all.photo_select.value;
var picimg=document.all.picimgage;
picimg.src=picsrc;
}
//校验图片大小
function checkPhoto(){
var picsrc=document.all.photo_select.value;
if(!picsrc){
alert("请选择一个本地图片文件！");
return;
}
var imgObj = new Image();
imgObj.src = picsrc;
var width = imgObj.width;
var height = imgObj.height;
if(picsrc.toLowerCase().indexOf("http://") > - 1){
alert("必须提供本机硬盘上的图片上传！");
return false;
}
alert("照片宽："+width+"像素 \n照片高："+height+"像素");
}
</script>
</head>
<body>
<div id="preview">
<img id="picimgage" style="width:160px;height:180px;border:solid 1px black;" />
</div>
<input id="photo_select" type="file" onchange="previewPhoto()" />
<input type="button" value="校验照片大小" onclick="checkPhoto()" />
</body>
</html>
我们知道由于IE7、8的安全控制，在访问本地一些文件时不允许直接访问，导致上面的代码可能无法正常运行，这种情况如果需要预览照片和获取图片大小
需要更改代码如下
<html>
<head>
<script>
// 获取本地上传的照片路径
function getPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
// IE下取得图片的本地路径
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
// Firefox下取得的是图片的数据
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
//预览照片
function previewPhoto(){
var picsrc=getPath(document.all.photo_select);
var picpreview=document.getElementById("preview");
if(!picsrc){
return
}
if(window.navigator.userAgent.indexOf("MSIE") >= 1) {
if(picpreview) {
try{
picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc;
}catch(ex){
alert("文件路径非法，请重新选择！") ;
return false;
}
}else{
picpreview.innerHTML="<img src='"+picsrc+"' />";
}
}
}
//校验图片大小
function checkPhoto(){
var photo = getPath(document.all.photo_select);
if(!photo){
alert("请选择一个本地图片文件！");
return;
}
var imgObj = new Image();
imgObj.src = photo;
var width = imgObj.width;
var height = imgObj.height;
///获取正确的图片尺寸大小，兼容ie6、7、8
try{
if((typeof width=="undefined" || width==0) && (typeof height=="undefined" || height==0)){
var picpreview=document.getElementById("preview");
if(picpreview && picpreview.filters && picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src) {
var tempDiv=document.createElement("div");
picpreview.appendChild(tempDiv);
tempDiv.style.width="10px";
tempDiv.style.height="10px";
tempDiv.style.diplay="none";
tempDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);";
tempDiv.ID="previewTemp";
var url=picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src;
tempDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=url;
width=tempDiv.offsetWidth;
height=tempDiv.offsetHeight;
picpreview.removeChild(tempDiv);
}
}
}
catch(e){
}
if(photo.toLowerCase().indexOf("http://") > - 1){
alert("必须提供本机硬盘上的图片上传！");
return false;
}
alert("照片宽："+width+"像素 \n照片高："+height+"像素");
}
</script>
</head>
<body>
<div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:160px;height:180px;border:solid 1px black;">
</div>
<input id="photo_select" type="file" onchange="previewPhoto()" />
<input type="button" value="校验照片大小" onclick="checkPhoto()" />
</body>
</html>
上面的代码有个缺陷：只能在ie上运行，其他浏览器上直接指定img标签的src既可显示图片，只是要获取上传文件的路径要使用我上面的getPath的方法获取既可
原文:http://www.cnblogs.com/houdejun214/archive/2009/11/17/1604496.html
附件是我根据本文整理的测试代码,IE, firfox 测试通过。
分享到：
相关推荐
标题中的“整理 IE 7、8 预览本地图片和获取本地图片大小”涉及到的是在Internet Explorer 7和8这两个较旧版本的浏览器中，如何处理本地图片的预览和获取图片尺寸的问题。在早期的Web开发中，由于浏览器兼容性问题，...
### IE8下上传图片无法预览本地图片解决方法技术资料 #### 背景与问题描述 在Web开发过程中，特别是在处理旧版本浏览器兼容性问题时，经常会遇到各种各样的挑战。Internet Explorer 8（IE8）作为一款较早的浏览器...
本篇文章将深入探讨一个关键问题——如何实现本地图片上传并预览的功能，并兼容IE6、IE7和IE8。这个功能对于现代浏览器来说是相当基础的，但在老版本的IE中，由于其内核和API的限制，实现起来并不简单。 首先，我们...
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点： 1. **FileReader API**：这是一个HTML5的新特性，用于读取文件。在支持的浏览器中，可以通过`FileReader.readAsDataURL(file)`方法...
Firefox3,IE6,IE7,IE8上传本地图片预览
在JavaScript（简称JS）中实现图片预览，尤其是在兼容老版本的Internet Explorer（如IE6、IE7、IE8）以及Firefox（FF）等浏览器上，需要考虑多种技术策略和兼容性问题。下面我们将详细讨论如何实现这个功能，并着重...
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8，而且chrome 火狐最新版本也有问题，自己动手丰衣足食。分享给给大家。
对于“图片预览(支持IE7)”这个主题，我们主要关注的是如何在Internet Explorer 7（简称IE7）这种老版本浏览器中实现图片预览功能。由于IE7并不支持现代浏览器的一些特性，比如CSS3或HTML5的`<img>`标签的`srcset`...
标题中的“本地图片预览代码（支持 IE6、IE7）”指的是在网页中实现一个功能，让用户可以预览本地的图片，同时这个功能需要兼容古老的Internet Explorer浏览器，特别是版本6和7。在Web开发中，由于IE6和IE7对现代Web...
在网页开发中，兼容性问题始终是一个挑战，尤其是在处理老版本的Internet Explorer（IE）浏览器时，如IE6、IE7和IE8。这些浏览器在处理某些现代Web技术时存在局限，例如对CSS3、HTML5新特性以及JavaScript的一些高级...
在IE8这样的老版本浏览器中，由于缺乏现代的CSS3 transform属性，开发者可能需要借助JavaScript手动计算图片的坐标和大小，实现平滑的缩放效果。可能还会用到一些像jQuery的animate()函数来实现动画效果，使放大过程...
标题中的“上传图片预览-兼容IE6，IE7，IE8，FF”指的是一个Web开发的技术解决方案，目的是实现图片上传前的预览功能，并确保该功能在早期版本的Internet Explorer（IE6、IE7、IE8）以及Firefox浏览器上都能正常工作...
在本地环境中预览SVG图片涉及到多个技术点，下面将详细介绍SVG的基本概念、本地预览的方法以及相关的开发工具和技巧。 1. SVG基本概念： SVG是一种可伸缩图形格式，允许开发者用数学方式描述图像，包括线条、形状、...
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
在本文中，我们将深入探讨如何使用jQuery实现本地图片上传预览功能，这是一项常见的Web开发需求，尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互...
这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目，是基于Vue 2.5.2版本实现的，它专注于为PC端用户提供图片预览和下载功能，但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...
在ASP.NET环境中，针对Internet Explorer 6、7和8这三个早期版本实现图片上传前的预览...综上所述，要实现在ASP.NET中IE6、7、8浏览器上的图片上传预览，需要利用JavaScript和特定的IE滤镜技术，并确保兼容性和安全性。
此外，出于安全考虑，用户上传的图片可能需要在服务器端进行处理，例如限制图片大小、重命名文件、转换格式等。这超出了HTML5和JavaScript客户端的能力范围，需要结合后端技术实现。 总的来说，HTML5和JavaScript...