在前端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事件。
谢谢!!!
