关于js判断图片是否存在的几种方法

我在项目中用过两种:
(1)//判断图片是否存在
function isHasImg(pathImg){
    var ImgObj=new Image();
    ImgObj.src= pathImg;
     if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
     {
       return true;
     } else {
       return false;
    }
}

(2)    //验证图片链接是否有效
    function validateImage(url)
    {    
        var xmlHttp ;
        if (window.ActiveXObject)
         {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         else if (window.XMLHttpRequest)
         {
          xmlHttp = new XMLHttpRequest();
         }
        xmlHttp.open("Get",url,false);
        xmlHttp.send();
        if(xmlHttp.status==404)
        return false;
        else
        return true;
    }



我最喜欢的是第四种方法,代码简单
1、 function CheckImgExists(imgurl) {  
    var ImgObj = new Image(); //判断图片是否存在  
    ImgObj.src = imgurl;  
    //没有图片,则返回-1  
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
        return true;  
    } else {  
        return false;
    }  
2、JS+XMLHTTP
var oreq = new ActiveXObject("Microsoft.XMLHTTP")
oreq.open("Get","blog/attachments/month_0606/s2006610204959.jpg",false);
oreq.send();
alert(oReq.status)
if(oReq.status==404)
alert('不存在');
else
alert("存在")
}
3、
<title> 文件上传前台控制检测程序   v0.6 </title> 
<style> 
body,td{font-size:12px;} 
</style> 
<script   language=javascript> 

 

var   ImgObj=new   Image();                         //建立一个图像对象 

var   AllImgExt= ".jpg|.jpeg|.gif|.bmp|.png| "//全部图片格式类型 
var   FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//全局变量   图片相关属性 

//以下为限制变量 
var   AllowExt= ".jpg|.gif|.doc|.txt| "         //允许上传的文件类型   &#320;为无限制   每个扩展名后边要加一个 "| "   小写字母表示 
//var   AllowExt=0 
var   AllowImgFileSize=70;                 //允许上传图片文件的大小   0为无限制     单位:KB   
var   AllowImgWidth=500;                         //允许上传的图片的宽度   &#320;为无限制 单位:px(像素) 
var   AllowImgHeight=500;                         //允许上传的图片的高度   &#320;为无限制 单位:px(像素) 

HasChecked=false; 

function   CheckProperty(obj)                 //检测图像属性 
    FileObj=obj; 
    if(ErrMsg!= " ")                         //检测是否为正确的图像文件 返回出错信息并重置 
    { 
        ShowMsg(ErrMsg,false); 
        return   false;                         //返回 
    } 

    if(ImgObj.readyState!= "complete ")         //如果图像是未加载完成进行循环检测 
    { 
        setTimeout( "CheckProperty(FileObj) ",500); 
        return   false; 
    } 

    ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;//取得图片文件的大小 
    ImgWidth=ImgObj.width                         //取得图片的宽度 
    ImgHeight=ImgObj.height;                 //取得图片的高度 
    FileMsg= "\n图片大小: "+ImgWidth+ "* "+ImgHeight+ "px "; 
    FileMsg=FileMsg+ "\n图片文件大小: "+ImgFileSize+ "Kb "; 
    FileMsg=FileMsg+ "\n图片文件扩展名: "+FileExt; 

    if(AllowImgWidth!=0&&AllowImgWidth <ImgWidth) 
        ErrMsg=ErrMsg+ "\n图片宽度超过限制。请上传宽度小于 "+AllowImgWidth+ "px的文件,当前图片宽度为 "+ImgWidth+ "px "; 

    if(AllowImgHeight!=0&&AllowImgHeight <ImgHeight) 
        ErrMsg=ErrMsg+ "\n图片高度超过限制。请上传高度小于 "+AllowImgHeight+ "px的文件,当前图片高度为 "+ImgHeight+ "px "; 

    if(AllowImgFileSize!=0&&AllowImgFileSize <ImgFileSize) 
        ErrMsg=ErrMsg+ "\n图片文件大小超过限制。请上传小于 "+AllowImgFileSize+ "KB的文件,当前文件大小为 "+ImgFileSize+ "KB "; 

    if(ErrMsg!= " ") 
        ShowMsg(ErrMsg,false); 
    else 
        ShowMsg(FileMsg,true); 

ImgObj.οnerrοr=function(){ErrMsg= '\n图片格式不正确或者图片已损坏! '} 

function   ShowMsg(msg,tf)         //显示提示信息   tf=true   显示文件信息   tf=false   显示错误信息   msg-信息内容 
    msg=msg.replace( "\n ", " <li> "); 
    msg=msg.replace(/\n/gi, " <li> "); 
    if(!tf) 
    { 
        document.all.UploadButton.disabled=true; 
        FileObj.outerHTML=FileObj.outerHTML; 
        MsgList.innerHTML=msg; 
        HasChecked=false; 
    } 
    else 
    { 
        document.all.UploadButton.disabled=false; 
        if(IsImg) 
            PreviewImg.innerHTML= " <img   src= ' "+ImgObj.src+ " '   width= '60 '   height= '60 '> " 
        else 
            PreviewImg.innerHTML= "非图片文件 "; 
        MsgList.innerHTML=msg; 
        HasChecked=true; 
    } 

function   CheckExt(obj) 
    ErrMsg= " "; 
    FileMsg= " "; 
    FileObj=obj; 
    IsImg=false; 
    HasChecked=false; 
    PreviewImg.innerHTML= "预览区 "; 
    if(obj.value== " ")return   false; 
    MsgList.innerHTML= "文件信息处理中... "; 
    document.all.UploadButton.disabled=true; 
    FileExt=obj.value.substr(obj.value.lastIndexOf( ". ")).toLowerCase(); 
    if(AllowExt!=0&&AllowExt.indexOf(FileExt+ "| ")==-1)         //判断文件类型是否允许上传 
    { 
        ErrMsg= "\n该文件类型不允许上传。请上传   "+AllowExt+ "   类型的文件,当前文件类型为 "+FileExt; 
        ShowMsg(ErrMsg,false); 
        return   false; 
    } 

    if(AllImgExt.indexOf(FileExt+ "| ")!=-1)                 //如果图片文件,则进行图片信息处理 
    { 
        IsImg=true; 
        ImgObj.src=obj.value; 
        CheckProperty(obj); 
        return   false; 
    } 
    else 
    { 
        FileMsg= "\n文件扩展名: "+FileExt; 
        ShowMsg(FileMsg,true); 
    } 
    

function   SwitchUpType(tf) 
        if(tf) 
          str= ' <input   type= "file "   name= "file1 "   οnchange= "CheckExt(this) "   style= "width:180px; "> ' 
        else 
          str= ' <input   type= "text "   name= "file1 "   οnblur= "CheckExt(this) "   style= "width:180px; "> ' 
        document.all.file1.outerHTML=str; 
        document.all.UploadButton.disabled=true; 
        MsgList.innerHTML= " "; 

</script> 
<form   enctype= "multipart/form-data "   method= "POST "   οnsubmit= "return   HasChecked; "> 
<fieldset   style= "width:   372;   height:   60;padding:2px; "> 
<legend> <font   color= "#FF0000 "> 图片来源 </font> </legend> 
<input   type= "radio "   name= "radio1 "   checked   οnclick= "SwitchUpType(true); "> 本地 <input   type= "radio "   name= "radio1 "   οnclick= "SwitchUpType(false); "> 远程: <input   type= "file "   name= "file1 "   οnchange= "CheckExt(this) "   style= "width:180px; ">   <input   type= "submit "   id= "UploadButton "   value= "开始上传 "   disabled> <br> 
<div   style= "border:1   solid  #808080;background:#E0E0E0;width100%;height:20px;color:#606060;padding:5px; "> 
<table   border= "0 "> <tr> <td   width= "60 "   id= "PreviewImg "> 预览区 </td> <td   id= "MsgList "   valign= "top "> </td> </tr> </table> 
</div> 
</fieldset> 
</form>
4、用onerror替换不存在的图片
<img src="images/img1.jpg" height="300" width="800" images/defaultImg.jpg';">

转载来自:http://chenrongchun890.blog.163.com/blog/static/13459742620141126152406/
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值