转：整理 IE 7、8预览本地图片和获取本地图片大小

最新推荐文章于 2020-07-08 10:25:10 发布

wasphuang

最新推荐文章于 2020-07-08 10:25:10 发布

阅读量118

点赞数

分类专栏： JavaScript&HTML 文章标签： IE Firefox Microsoft JavaScript 浏览器 ViewUI

本文链接：https://blog.csdn.net/wasphuang/article/details/83557275

版权

JavaScript&HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文不是讨论技术问题，只是将现有的关于图片预览方面的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 测试通过。

wasphuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转：整理 IE 7、8预览本地图片和获取本地图片大小

本文不是讨论技术问题，只是将现有的关于图片预览方面的javascript 代码进行整理，希望对那些不知道这方面知识的朋友有些帮助问题原因在ie6我们要预览一个本地文件只需要这样既可实现：[code="java"] //预览照片 function previewPhoto(){ v...
复制链接

扫一扫