JS判断服务器端文件是否存在(三)_js判断远程文件是否存在的函数-CSDN博客

本文介绍了一种在前端JavaScript中判断远程文件是否存在的方法，通过发送GET请求并检查响应状态来实现。适用于图片等资源的预加载判断，避免无效链接导致的加载失败。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一章简单介绍了JS获取项目路径(二),如果没有看过，请观看上一章

在前端JS操作时，有时候需要判断一下文件是否存在，如图片。数据库中存在了这个值，然后直接在前端显示这个图片。这是不正确的。例如，在数据库中存放的是 /image/user.jpg ; 而实际上这张图片被存放在GWML/image/user.jpg, 这个时候设置图片target.attr(src,path); 是不正确的，是取不出来的。应该先判断一下这个path路径是不是有这张图片。如果没有的话，显示错误图片或者默认图片，如果有的话，则显示正确的图片。

一.所用的JS方法

/**
 * 判断服务的文件是否存在
 * @param filepath 文件地址  即目录名
 * @returns {Boolean}  文件名
 */
function isExistFile(filepath, filename){
	if(filepath ==null ||filename ==null ||filepath ==undefined ||filename ==undefined || filepath =="" || filename ==""){
		return false
	}
    var xmlhttp;
    if (window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
    }else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET",filepath + filename,false);
    xmlhttp.send();
    if(xmlhttp.readyState==4){  
        if(xmlhttp.status==200) return true; //url存在  
        else if(xmlhttp.status==404) return false; //url不存在  
        else return false;//其他状态  
    }
}

如果存在，则返回true. 如果不存在，则返回false.

二.常见使用方式

// 其中photo_path为目录，photo_link为从数据库中取出的值
 if(isExistFile(photo_path, photo_link)){
    	$('#user_photo_like').attr('src', photo_path+photo_link);
    } else{
    	$('#user_photo_like').attr('src', 'img/user.jpg');
    }

当然，这里指的是文件，并不仅限于图片。如果是图片的话，还可以有更好的做法。如设置onerror事件。

谢谢!!!