本文不是讨论技术问题，只是将现有的关于图片预览方面的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开发中，由于浏览器兼容性问题，...
30. 字体设置：掌握设置文字字体、大小、颜色和样式的方法。 31. 打印设置：了解如何选择打印选项，如打印范围。 32. 取消密码保护：学会解除文档的密码保护。 33. 插入图片：掌握从指定路径插入图片。 ...
5、关于“网络获取电影的图片和内容” 这是付费注册用户功能，要求第一部电影一个文件夹，然后本程序会自动在优影服务器寻找电影的海报图片和内容提要文件，并且自动下载到这部电影的文件夹中。有些电影可能会找不到...
21. **Hostname.exe**：TCP/IP主机名查询工具，用于获取本地计算机的DNS名称。 22. **Ipconfig.exe**：IP配置工具，显示TCP/IP配置信息。 23. **KodakPrv.exe**：柯达图像预览程序，用于查看图像文件。 24. **...
map 命令还显示文件系统的类型和每个磁盘的大小（MB）。 二。★★★常见文件扩展名和它们的说明 常见文件扩展名和它们的说明 A ACE：Ace压缩档案格式 ACT：Microsoft office助手文件 AIF，AIFF：音频互交换...
2.请确认本地测试环境能够很好的运行ASP+ACCESS程序 3.请确认给予本考试系统所在目录IIS用户或者everyone可写权限！！ 程序特点 1.考试项目数据库独立存在，实现高考生数据量承载。 2.考题按格式简单录入，减少了...