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

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

С помощью 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: Поскольку синхронизация 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;
});
}

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

Вот как это сделать 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

Я использую этот скрипт, чтобы проверить, существует ли файл (также он обрабатывает проблему перекрестного происхождения):

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

Обратите внимание, что следующая синтаксическая ошибка выдается, когда проверяемый файл не содержит JSON.

Uncaught 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-адрес веб-сайта, браузер автоматически определит имя хоста, чтобы оно работало на локальном хосте и на сервере:

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

    }
});

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

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

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

Если бы пользователь не загружал аватар, 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);
},