js根据图片路径地址判断图片是否存在的几种方法

js根据图片路径地址判断图片是否存在的几种方法,可以是远程图片或是是本地上传的图片 转自:http://www.ablanxue.com/prone_4739_1.html

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;   }  

<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>  }  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| ”     //允许上传的文件类型  ŀ为无限制  每个扩展名后边要加一个 “| ”  小写字母表示 

//var  AllowExt=0 

var  AllowImgFileSize=70;         //允许上传图片文件的大小  0为无限制   单位:KB   

var  AllowImgWidth=500;             //允许上传的图片的宽度  ŀ为无限制 单位:px(像素) 

var  AllowImgHeight=500;             //允许上传的图片的高度  ŀ为无限制 单位: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> 

<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’;”>

    原文作者:我是冬瓜
    原文地址: https://blog.csdn.net/u011352738/article/details/76998733
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞