我如何检查文件是否存在jQuery或纯JavaScript?

我如何检查我的服务器上的文件是否存在jQuery或纯JavaScript?

534014 次浏览
小开
最佳答案

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(成功)。

编辑2:由于sync XMLHttpRequest已弃用，你可以添加一个这样的实用方法来异步执行:

function executeIfFileExist(src, callback) {
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (this.readyState === this.DONE) {
callback()
}
}
xhr.open('HEAD', src)
}
小开

您需要做的是向服务器发送一个请求，让它进行检查，然后将结果发回给您。

您试图与哪种类型的服务器通信?您可能需要编写一个小型服务来响应请求。

小开

我使用这个脚本添加替代图像

function imgError()
{
alert('The image could not be loaded.');
}

HTML:

<img src="image.gif" onerror="imgError()" />

http://wap.w3schools.com/jsref/event_onerror.asp < a href = " http://wap.w3schools.com/jsref/event_onerror.asp " > < / >

小开

这对我来说很管用:

function ImageExist(url)
{
var img = new Image();
img.src = url;
return img.height != 0;
}
小开

只要你在同一域上测试文件，这应该可以工作:

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

小开

一种类似的和最新的方法。

$.get(url)
.done(function() {
// exists code
}).fail(function() {
// not exists code
})
小开

对于客户端计算机，可以通过以下方式实现:

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")
}

这是我的程序传输文件到一个特定的位置，并显示警报，如果它不存在

小开

当我试图运行这个问题的答案时，我遇到了一个跨域权限问题，所以我去了:

function UrlExists(url) {
$('<img src="'+ url +'">').load(function() {
return true;
}).bind('error', function() {
return false;
});
}

它似乎工作得很好，希望这有助于某人!

小开

首先创建函数

. 
$.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);

小开

异步调用查看文件是否存在是更好的方法，因为它不会因为等待服务器的响应而降低用户体验。如果调用.open时将第三个参数设置为false(就像上面的许多例子一样，例如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 );
}
}

来源:https://xhr.spec.whatwg.org/

小开

这并没有解决OP的问题，但对于任何从数据库返回结果的人来说:这里是我使用的一个简单方法。

如果用户没有上传头像，avatar字段将是NULL，所以我将从img目录插入一个默认头像图像。

function getAvatar(avatar) {
if(avatar == null) {
return '/img/avatar.jpg';
} else {
return '/avi/' + avatar;
}
}

然后

<img src="' + getAvatar(data.user.avatar) + '" alt="">
小开

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

我使用这个脚本来检查一个文件是否存在(它也处理交叉起源问题):

$.ajax(url, {
method: 'GET',
dataType: 'jsonp'
})
.done(function(response) {
// exists code
}).fail(function(response) {
// doesnt exist
})

请注意，当检查的文件不包含JSON时，会抛出以下语法错误。

Uncaught SyntaxError:意外的令牌<

小开

如果你使用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范围内，你可以很容易地检查url是否存在:

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');


console.log(isValidUrl); // true || false
小开

它为我工作，使用iframe忽略浏览器显示GET错误消息

 var imgFrame = $('<iframe><img src="' + path + '" /></iframe>');
if ($(imgFrame).find('img').attr('width') > 0) {
// do something
} else {
// do something
}
小开

这是对公认答案的改编，但我不能从答案中得到我需要的东西，必须测试它是否有效，因为这是一种直觉，所以我把我的解放在这里。

我们需要验证一个本地文件是否存在，并且只允许该文件(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");


}
});
小开

我想要一个函数，将返回布尔值，我遇到了闭包和异步性相关的问题。我是这样解决的:

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);
},
小开

这是我从2020年开始工作的Async纯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()命令，它似乎不会做任何事情

小开

由于缓存，所有其他答案都可能失败!

向服务器上的文件发出HTTP请求可以被浏览器的缓存拦截，然后返回缓存的响应。但是在此期间，该文件可能会在服务器上被删除，因此忽略缓存可能会返回假阳性结果。

合适的解决方案是创建非缓存的HTTP HEAD请求。Nik Sumeiko的答案使用no-cache报头，这意味着响应可以被缓存，但在重用之前必须重新验证。在这种情况下，服务器可能返回304: Not Modified，它不是200: OK，因此是假阴性。

为了避免缓存，正确的头文件是Cache-Control: no-store

文件可以在没有HTTP 200响应的情况下存在

你还应该记住，重定向 (301: Moved Permanently， 307: Temporary Redirect或308: Permanent Redirect)可能会发生，所以文件可以存在于其他地方，并且可以从不同的位置返回:根据用例，在这种情况下，可以选择重定向而不是返回false。

另外请记住，如果您在不同的域上检查文件是否存在，并且它的CORS策略没有打开到您的服务器，后台请求将被阻止。在这种情况下，通常返回403: Forbidden，这并不意味着文件不存在，而是文件不可用。最后但并非最不重要的，同样适用于500: Internal Server Error响应，这意味着HTTP服务器未能处理请求，但该文件可以通过其他方式可用，如通过FTP。

如果文件存在，则返回true;如果文件不可用或重定向，则返回false: 或 undefined:

const fileExists = file =>
fetch(file, {method: 'HEAD', cache: 'no-store'})
.then(response => ({200: true, 404: false})[response.status])
.catch(exception => undefined);


fileExists("yourFile.html").then(yes => yes && alert("yourFile.html exists"));


// or in the async scope...
let yourFileExists = await fileExists("yourFile.html");

现代和过时的方法

既然我们现在生活在未来，我还会建议:

  • $ . ajax ()过时，不要在新项目中使用
  • XMLHttpRequest ()过时，不要在新项目中使用
  • fetch ()现代方法，使用它，如果你是自由选择

请注意 GET/POST方法(如<img src...>)在这里不合适，因为它们通过下载文件浪费了网络流量(想象一下有高分辨率照片的场景，用户有付费移动数据或在连接较差的地区)

现代的PWA方法是使用缓存API和serviceWorker的获取事件。在链接中的例子中，应该有这样的东西

if(event.request.cache=="no-store") return fetch(event.request);
如果没有这个，缓存设置可能会被忽略，并且可能没有办法从主线程中检测到运行serviceWorker的远程文件的存在-举例说明 在这里 . < / p >

提交答案