这是我从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()命令，它似乎不会做任何事情。

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

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

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

未捕获SyntaxError:意外的令牌<

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

如果你使用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;
  }
}

然后在你的其他异步作用域中，你可以很容易地检查url是否存在:

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

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

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

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

HTML:

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

http://wap.w3schools.com/jsref/event_onerror.asp

只要你在同一个域上测试文件，这应该是有效的:

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);要求的事情。open('HEAD'， url, false);