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

Question

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

Answer 1

Функция 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;
    }
}

Answer 2

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

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

Answer 3

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

Нам нужно было проверить, существует ли локальный файл, и разрешить открытие файла (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");

    }
});

Answer 4

Я хотел функцию, которая возвращала бы логическое значение, я столкнулся с проблемами, связанными с закрытием и асинхронностью.Я решил так:

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

Answer 5

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

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

Answer 6

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

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

Answer 7

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

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

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

затем

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