Wie überprüfe ich, ob eine Datei in jQuery oder reinem JavaScript vorhanden ist?

Wie überprüfe ich, ob eine Datei auf meinem Server in jQuery oder reinem JavaScript vorhanden ist?

Mit jQuery:

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

BEARBEITEN:

Hier ist der Code zum Überprüfen des 404-Status ohne Verwendung von jQuery

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

Kleine Änderungen und es könnte stattdessen nach dem Status HTTP-Statuscode 200 (Erfolg) suchen.

BEARBEITEN 2: Da die Synchronisierung von XMLHttpRequest veraltet ist, können Sie eine Dienstprogrammmethode wie diese hinzufügen, um sie asynchron auszuführen:

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

Ein ähnlicher und aktuellerer Ansatz.

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

Das funktioniert bei mir:

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

Ich habe dieses Skript verwendet, um ein alternatives Bild hinzuzufügen

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

HTML:

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

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

Solange Sie Dateien in derselben Domäne testen, sollte dies funktionieren:

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

Bitte beachten Sie, dass in diesem Beispiel eine GET-Anforderung verwendet wird, die neben dem Abrufen der Header (alles, was Sie benötigen, um zu überprüfen, ob die Datei vorhanden ist) die gesamte Datei abruft. Wenn die Datei groß genug ist, kann es eine Weile dauern, bis diese Methode abgeschlossen ist.

Der bessere Weg, dies zu tun, wäre, diese Zeile zu ändern: req.open('GET', url, false);zureq.open('HEAD', url, false);

Beim Versuch, die Antwort auf diese Frage auszuführen, trat ein domänenübergreifendes Berechtigungsproblem auf.

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

Es scheint großartig zu funktionieren, hoffe das hilft jemandem!

So geht's mit ES7, wenn Sie Babel Transpiler oder Typescript 2 verwenden:

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

In Ihrem anderen asyncBereich können Sie dann leicht überprüfen, ob eine URL vorhanden ist:

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

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

Ich verwende dieses Skript, um zu überprüfen, ob eine Datei vorhanden ist (es behandelt auch das Cross-Origin-Problem):

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

Beachten Sie, dass der folgende Syntaxfehler ausgelöst wird, wenn die zu überprüfende Datei kein JSON enthält.

Nicht erfasster SyntaxError: Unerwartetes Token <

Ein asynchroner Aufruf, um festzustellen, ob eine Datei vorhanden ist, ist der bessere Ansatz, da er die Benutzererfahrung nicht beeinträchtigt, indem er auf eine Antwort vom Server wartet. Wenn Sie .openmit dem dritten Parameter auf false aufrufen (wie in vielen obigen Beispielen zum Beispiel)http.open('HEAD', url, false); ), handelt es sich um einen synchronen Aufruf, und Sie erhalten eine Warnung in der Browserkonsole.

Ein besserer Ansatz ist:

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

Quelle: https://xhr.spec.whatwg.org/

Für einen Client-Computer kann dies erreicht werden durch:

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

Dies ist mein Programm zum Übertragen einer Datei an einen bestimmten Speicherort und zeigt eine Warnung an, wenn sie nicht vorhanden ist

JavaScript-Funktion zum Überprüfen, ob eine Datei vorhanden ist:

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

Erstellt zuerst die Funktion

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

Nach Verwendung der Funktion wie folgt

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

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

Dies ist eine Anpassung an die akzeptierte Antwort, aber ich konnte nicht das bekommen, was ich brauchte, und musste testen, ob dies funktioniert hat, da es eine Vermutung war, also stelle ich meine Lösung hier vor.

Wir mussten überprüfen, ob eine lokale Datei vorhanden war, und die Datei (eine PDF-Datei) nur öffnen lassen, wenn sie vorhanden war. Wenn Sie die URL der Website weglassen, ermittelt der Browser automatisch den Hostnamen, sodass er in localhost und auf dem Server funktioniert:

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

    }
});

Sie müssten lediglich eine Anfrage an den Server senden, damit dieser die Prüfung durchführen kann, und dann das Ergebnis an Sie zurücksenden.

Mit welchem ​​Servertyp möchten Sie kommunizieren? Möglicherweise müssen Sie einen kleinen Dienst schreiben, um auf die Anfrage zu antworten.

Dies geht nicht auf die Frage des OP ein, sondern für alle, die Ergebnisse aus einer Datenbank zurückgeben: Hier ist eine einfache Methode, die ich verwendet habe.

Wenn der Benutzer keinen Avatar hochladen avatarwürde NULL, wäre das Feld , also würde ich ein Standard-Avatar-Bild aus dem imgVerzeichnis einfügen .

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

dann

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

Es funktioniert für mich, verwenden Sie iframe, um Browser zu ignorieren, die GET-Fehlermeldung anzeigen

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

Ich wollte eine Funktion, die einen Booleschen Wert zurückgibt. Ich stieß auf Probleme im Zusammenhang mit dem Schließen und der Asynchronität. Ich habe es so gelöst:

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