Как проверить, существует ли файл в jQuery или чистом JavaScript?

Функция 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: Неожиданный токен <

Это адаптация к принятому ответу, но я не смог получить из ответа то, что мне было нужно, и мне пришлось проверить, что это сработало, так как это было предчувствие, поэтому я предлагаю свое решение здесь.

Нам нужно было проверить, существует ли локальный файл, и разрешить открытие файла (PDF), только если он существует. Если вы опустите URL-адрес веб-сайта, браузер автоматически определит имя хоста, чтобы оно работало на локальном хосте и на сервере:

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

Подобный и более современный подход.

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

Это работает для меня, используйте iframe, чтобы игнорировать браузеры показывают GET сообщение об ошибке

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

Это не отвечает на вопрос ОП, но для тех, кто возвращает результаты из базы данных: вот простой метод, который я использовал.

Если пользователь не загрузит аватар, поле avatar будет NULL, поэтому я вставлю изображение аватара по умолчанию из каталога img.

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

Тогда

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

Что вам нужно сделать, это отправить запрос на сервер для выполнения проверки, а затем отправить результат обратно к вам.

С каким типом сервера вы пытаетесь установить связь? Возможно, вам придется написать небольшой сервис, чтобы ответить на запрос.

Сначала создает функцию

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

Для клиентского компьютера это может быть достигнуто путем:

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

Кажется, работает отлично, надеюсь, это поможет кому-то!

Это работает для меня:

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

Вот как это сделать ES7, если вы используете Babel Transpiler или Typescript 2:

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

Я использовал этот скрипт, чтобы добавить альтернативное изображение

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

HTML:

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

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

Асинхронный вызов, чтобы увидеть, существует ли файл, является лучшим подходом, потому что он не ухудшает взаимодействие с пользователем, ожидая ответа от сервера. Если вы делаете вызов .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/