Jak sprawdzić, czy plik istnieje w jQuery lub czystym JavaScript?

Jak sprawdzić, czy plik na moim serwerze istnieje w jQuery lub czystym JavaScript?

Z jQuery:

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

EDYTOWAĆ:

Oto kod do sprawdzania statusu 404 bez użycia jQuery

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

Małe zmiany i może zamiast tego sprawdzić status kod statusu HTTP 200 (sukces).

EDYCJA 2: Ponieważ synchronizacja XMLHttpRequest jest przestarzała, możesz dodać taką metodę narzędzia, aby wykonać to asynchronicznie:

function executeIfFileExist(src, callback) {
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function() {
        if (this.readyState === this.DONE) {
            callback()
        }
    }
    xhr.open('HEAD', src)
}

Podobne i bardziej aktualne podejście.

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

To działa dla mnie:

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

użyłem tego skryptu, aby dodać alternatywny obraz

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

HTML:

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

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

Dopóki testujesz pliki w tej samej domenie, powinno to działać:

function fileExists(url) {
    if(url){
        var req = new XMLHttpRequest();
        req.open('GET', url, false);
        req.send();
        return req.status==200;
    } else {
        return false;
    }
}

Uwaga: w tym przykładzie użyto żądania GET, które oprócz pobrania nagłówków (wszystko, czego potrzebujesz, aby sprawdzić, czy plik istnieje), pobiera cały plik. Jeśli plik jest wystarczająco duży, wykonanie tej metody może trochę potrwać.

Lepszym sposobem na to byłoby zmiana tej linii: req.open('GET', url, false);nareq.open('HEAD', url, false);

Podczas próby uruchomienia odpowiedzi na to pytanie otrzymywałem problem z uprawnieniami między domenami, więc wybrałem:

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

Wygląda na to, że działa świetnie, mam nadzieję, że to komuś pomoże!

Oto jak to zrobić ES7, jeśli używasz transpilatora Babel lub 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;
  }
}

Następnie w swoim drugim asynczakresie możesz łatwo sprawdzić, czy adres URL istnieje:

const isValidUrl = await isUrlFound('http://www.example.com/somefile.ext');

console.log(isValidUrl); // true || false

Używam tego skryptu, aby sprawdzić, czy plik istnieje (obsługuje także problem krzyżowego pochodzenia):

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

Zauważ, że następujący błąd składniowy jest generowany, gdy sprawdzany plik nie zawiera JSON.

Uncaught SyntaxError: Nieoczekiwany token <

Wywołanie asynchroniczne, aby sprawdzić, czy plik istnieje, jest lepszym rozwiązaniem, ponieważ nie pogarsza wrażeń użytkownika, czekając na odpowiedź z serwera. Jeśli wykonasz wywołanie .openz trzecim parametrem ustawionym na false (jak na przykład w wielu przykładach powyżej)http.open('HEAD', url, false); ), jest to połączenie synchroniczne i pojawi się ostrzeżenie w konsoli przeglądarki.

Lepszym podejściem jest:

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

źródło: https://xhr.spec.whatwg.org/

W przypadku komputera klienckiego można to osiągnąć poprzez:

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

To jest mój program do przesyłania pliku do określonej lokalizacji i wyświetla alert, jeśli nie istnieje

Funkcja JavaScript, aby sprawdzić, czy plik istnieje:

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

Najpierw tworzy funkcję

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

Po użyciu funkcji w następujący sposób

if($.UrlExists("urlimg")){
	foto = "img1.jpg";
}else{
	foto = "img2.jpg";
}

$('<img>').attr('src',foto);

To jest dostosowanie do zaakceptowanej odpowiedzi, ale nie mogłem uzyskać tego, czego potrzebowałem od odpowiedzi, i musiałem przetestować, czy zadziałało, ponieważ było przeczucie, więc tutaj zamieszczam moje rozwiązanie.

Musieliśmy sprawdzić, czy plik lokalny istnieje i zezwolić na otwarcie pliku (PDF) tylko wtedy, gdy istnieje. Jeśli pominiesz adres URL witryny, przeglądarka automatycznie określi nazwę hosta - dzięki czemu będzie działać w localhost i na serwerze:

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

    }
});

To, co musisz zrobić, to wysłać do serwera żądanie wykonania kontroli, a następnie odesłać wynik.

Z jakim typem serwera próbujesz się komunikować? Może być konieczne napisanie małej usługi, aby odpowiedzieć na żądanie.

To nie dotyczy pytania PO, ale dla każdego, kto zwraca wyniki z bazy danych: oto prosta metoda, której użyłem.

Jeśli użytkownik nie załadował awatara, avatarpole byłoby NULL, więc wstawiłbym domyślny obraz awatara z imgkatalogu.

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

następnie

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

Działa dla mnie, użyj iframe, aby zignorować przeglądarki wyświetlające komunikat o błędzie GET

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

Chciałem funkcji, która zwróciłaby wartość logiczną, napotkałem problemy związane z zamknięciem i asynchronicznością. Rozwiązałem w ten sposób:

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