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

Question

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

Answer 1

С jQuery:

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

EDIT:

Вот код для проверки статуса 404, без использования jQuery

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

Небольшие изменения, и вместо этого он может проверять статус HTTP-код состояния 200 (успех).

Answer 2

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

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

Answer 3

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

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

Answer 4

я использовал этот скрипт для добавления альтернативного изображения

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

HTML:

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

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

Answer 5

Пока вы тестируете файлы на том же домене , это должно работать:

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

Answer 6

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

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

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

Answer 7

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

Answer 8

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

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

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

Uncaught SyntaxError: Неожиданный токен <</p>

Answer 9

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

Answer 10

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

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

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