如何检查我的服务器上的文件是否存在于jQuery或纯JavaScript中？
答案 0 :(得分：417)
使用jQuery：
$.ajax({
url:'http://www.example.com/somefile.ext',
type:'HEAD',
error: function()
{
//file not exists
},
success: function()
{
//file exists
}
});
编辑：
以下是检查404状态的代码，不使用jQuery
function UrlExists(url)
{
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
小的更改，它可以检查状态HTTP状态代码200（成功），而不是。
答案 1 :(得分：66)
类似且更新的方法。
$.get(url)
.done(function() {
// exists code
}).fail(function() {
// not exists code
})
答案 2 :(得分：63)
这对我有用：
function ImageExist(url)
{
var img = new Image();
img.src = url;
return img.height != 0;
}
答案 3 :(得分：42)
我使用此脚本添加替代图像
function imgError()
{
alert('The image could not be loaded.');
}
HTML：
<img src="image.gif" onerror="imgError()" />
答案 4 :(得分：19)
只要您在同一个域上测试文件，这应该有效：
function fileExists(url) {
if(url){
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
} else {
return false;
}
}
请注意，此示例使用GET请求，除了获取标题（您需要检查天气存档文件）之外，还会获取整个文件。 如果文件足够大，则此方法可能需要一段时间才能完成。
更好的方法是更改此行：req.open('GET', url, false);到req.open('HEAD', url, false);
答案 5 :(得分：15)
在尝试运行此问题的答案时，我遇到了跨域权限问题，所以我选择了：
function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
return true;
}).bind('error', function() {
return false;
});
}
看起来效果很好，希望这有助于某人！
答案 6 :(得分：4)
如果您正在使用Babel transpiler或Typescript 2，那么如何使用ES7方式：
async function isUrlFound(url) {
try {
const response = await fetch(url, {
method: 'HEAD',
cache: 'no-cache'
});
return response.status === 200;
} catch(error) {
// console.log(error);
return false;
}
}
然后在您的其他async范围内，您可以轻松检查网址是否存在：
const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');
console.log(isValidUrl); // true || false
答案 7 :(得分：3)
我使用此脚本检查文件是否存在（它也处理交叉原点问题）：
$.ajax(url, {
method: 'GET',
dataType: 'jsonp'
})
.done(function(response) {
// exists code
}).fail(function(response) {
// doesnt exist
})
请注意，当被检查的文件不包含JSON时，会引发以下语法错误。
未捕获的SyntaxError：意外的标记＆lt;
答案 8 :(得分：2)
查看文件是否存在的异步调用是更好的方法，因为它不会通过等待服务器的响应来降低用户体验。如果您在第三个参数设置为false的情况下调用.open（如上面的许多示例中所示，例如http.open('HEAD', url, false);），这是一个同步调用，您将在浏览器控制台中收到警告。
更好的方法是：
function fetchStatus( address ) {
var client = new XMLHttpRequest();
client.onload = function() {
// in case of network errors this might not give reliable results
returnStatus( this.status );
}
client.open( "HEAD", address, true );
client.send();
}
function returnStatus( status ) {
if ( status === 200 ) {
console.log( 'file exists!' );
}
else {
console.log( 'file does not exist! status: ' + status );
}
}
答案 9 :(得分：2)
用于检查文件是否存在的JavaScript函数：
function doesFileExist(urlToFile)
{
var xhr = new XMLHttpRequest();
xhr.open('HEAD', urlToFile, false);
xhr.send();
if (xhr.status == "404") {
console.log("File doesn't exist");
return false;
} else {
console.log("File exists");
return true;
}
}
答案 10 :(得分：1)
对于客户端计算机，可以通过以下方式实现：
try
{
var myObject, f;
myObject = new ActiveXObject("Scripting.FileSystemObject");
f = myObject.GetFile("C:\\img.txt");
f.Move("E:\\jarvis\\Images\\");
}
catch(err)
{
alert("file does not exist")
}
这是我将文件传输到特定位置的程序，如果不存在则显示警告
答案 11 :(得分：1)
首先创建函数
$.UrlExists = function(url) {
var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status!=404;
}
使用以下功能后
if($.UrlExists("urlimg")){
foto = "img1.jpg";
}else{
foto = "img2.jpg";
}
$('<img>').attr('src',foto);
答案 12 :(得分：1)
这是我从2020年开始使用的异步纯Javascript
function testFileExists(src, successFunc, failFunc) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (this.readyState === this.DONE) {
if (xhr.status === 200) {
successFunc(xhr);
} else {
failFunc(xhr);
}
}
}
// xhr.error = function() {
// failFunc(xhr);
// }
// xhr.onabort = function() {
// failFunc(xhr);
// }
// xhr.timeout = function() {
// failFunc(xhr);
// }
xhr.timeout = 5000; // TIMEOUT SET TO PREFERENCE (5 SEC)
xhr.open('HEAD', src, true);
xhr.send(null); // VERY IMPORTANT
}
function fileExists(xhr) {
alert("File exists !! Yay !!");
}
function fileNotFound(xhr) {
alert("Cannot find the file, bummer");
}
testFileExists("test.html", fileExists, fileNotFound);
我无法强迫它返回任何中止，错误或超时回调。 在上面的测试中，这些参数中的每一个返回的主要状态代码均为0，因此 我删除了它们。您可以尝试。 我将超时设置为5秒，因为默认值似乎非常高。 使用Async调用，如果没有send（）命令，它似乎什么也不做。
答案 13 :(得分：1)
这是对已接受的答案的改编，但我无法从答案中得到我需要的东西，并且不得不测试这是因为它是预感，所以我把我的解决方案放在这里。
我们需要验证本地文件是否存在，并且只允许文件（PDF）打开（如果存在）。如果省略网站的URL，浏览器将自动确定主机名 - 使其在localhost和服务器上运行：
$.ajax({
url: 'YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf',
type: 'HEAD',
error: function () {
//file not exists
alert('PDF does not exist');
},
success: function () {
//file exists
window.open('YourFolderOnWebsite/' + SomeDynamicVariable + '.pdf', "_blank", "fullscreen=yes");
}
});
答案 14 :(得分：0)
这并不能解决OP的问题，但对于那些从数据库返回结果的人来说：这是我使用的一种简单方法。
如果用户没有上传头像，则avatar字段将为NULL，因此我会在img目录中插入默认头像图片。< / p>
function getAvatar(avatar) {
if(avatar == null) {
return '/img/avatar.jpg';
} else {
return '/avi/' + avatar;
}
}
然后
<img src="' + getAvatar(data.user.avatar) + '" alt="">
答案 15 :(得分：0)
当浏览器向没有 Cache-Control: no-store 标头的文件发出前面的 HTTP 请求时，所有提供的答案都将失败。然后向服务器上的文件发出一个 XMLHttpRequest 被浏览器的缓存拦截并返回缓存的响应。但同时该文件可能会在服务器上被删除。
正确的解决方案是创建非缓存的 HTTP HEAD 请求：
const fileExists = file =>
fetch(file, {method: 'HEAD', cache: 'no-store'})
.then(response => response.status==200);
fileExists("yourFile.html").then(yes => yes && alert("yourFile.html exists"));
您还应该记住，可能会发生重定向（3xx 响应），因此该文件可能存在于其他地方并可能从不同位置返回：根据用例，可以选择在这种情况下，遵循重定向而不是返回 false。
还要记住，如果您检查不同域上的文件是否存在，并且其 CORS 策略未对您的服务器开放，则后台请求将被阻止。
既然我们现在生活在未来，我也建议：
答案 16 :(得分：0)
我想要一个返回布尔值的函数，我遇到了与关闭和异步性有关的问题。我这样解决了：
checkFileExistence= function (file){
result=false;
jQuery.ajaxSetup({async:false});
$.get(file)
.done(function() {
result=true;
})
.fail(function() {
result=false;
})
jQuery.ajaxSetup({async:true});
return(result);
},
答案 17 :(得分：0)
它适用于我，使用iframe忽略浏览器显示GET错误消息
var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
if ($(imgFrame).find('img').attr('width') > 0) {
// do something
} else {
// do something
}
答案 18 :(得分：0)
您需要做的是向服务器发送请求以进行检查，然后将结果发回给您。
您尝试与哪种类型的服务器通信？您可能需要编写一个小型服务来响应请求。
答案 19 :(得分：-1)
您可以使用此命令，我将其用于我的网站。
if (File("patch").exists)
{
//do jobe when exists
} else {
// do jobe when dosent exist
}
谢谢