Як перевірити, чи існує файл у 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 (успіх).

EDIT 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 або 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-адресу веб-сайту, браузер автоматично визначить ім'я хоста - змусить його працювати в 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");

    }
});

Що потрібно зробити, це надіслати запит на сервер, щоб він міг зробити перевірку, а потім надіслати вам результат.

З яким типом сервера ви намагаєтесь спілкуватися? Вам може знадобитися написати невелику послугу, щоб відповісти на запит.

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

Якби користувач не завантажив аватар, це 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);
},