如何检查jQuery或纯JavaScript中是否存在文件？

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

使用jQuery：

$.ajax({
    url:'http://www.example.com/somefile.ext',
    type:'HEAD',
    error: function()
    {
        //file not exists
    },
    success: function()
    {
        //file exists
    }
});

编辑：

这是不使用jQuery即可检查404状态的代码

function UrlExists(url)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url, false);
    http.send();
    return http.status!=404;
}

进行较小的更改，它可以检查状态HTTP状态代码200（成功）。

编辑2：由于不推荐使用同步XMLHttpRequest，因此您可以添加如下所示的实用程序方法以使其异步：

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

一种类似且最新的方法。

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

这对我有用：

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

我使用此脚本添加替代图像

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);到req.open('HEAD', url, false);

尝试运行此问题的答案时遇到了跨域权限问题，所以我选择了：

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

看来效果很好，希望这对某人有帮助！

如果您使用的是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

我使用此脚本检查文件是否存在（它也处理跨源问题）：

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

请注意，当要检查的文件不包含JSON时，将引发以下语法错误。

未捕获到的SyntaxError：意外令牌<

异步调用以查看文件是否存在是更好的方法，因为它不会通过等待服务器的响应来降低用户体验。如果您.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/

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

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

这是我的程序，用于将文件传输到特定位置并显示警告（如果不存在）

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

首先创建功能

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

这是对已接受答案的改编，但是我无法从答案中得到所需的内容，因此必须凭直觉来对其进行测试，因此我在这里提出了解决方案。

我们需要验证本地文件是否存在，并且仅允许打开该文件（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");

    }
});

您要做的就是向服务器发送请求以进行检查，然后将结果发送回给您。

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

这没有解决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="">

它对我有用，使用iframe忽略浏览器显示GET错误消息

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

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

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