it-swarm.com.de

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

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

241
usertest

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 der Status-Statuscode 200 (Erfolg) überprüft werden.

403
cichy

Ein ähnlicher und aktuellerer Ansatz.

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

Das funktioniert für mich:

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

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

41
Gino

So lange Sie Dateien auf dem Computer testen gleiche Domain das sollte 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 Kopfzeilen (alles, was Sie zum Prüfen der Wetterlage der Datei benötigen) die gesamte Datei abruft. Wenn die Datei groß genug ist, kann dies eine Weile dauern.

Der beste Weg, dies zu tun, würde diese Zeile ändern: req.open('GET', url, false); in req.open('HEAD', url, false);

18
Moob

Beim Versuch, die Antwort auf diese Frage auszuführen, habe ich ein Problem mit domänenübergreifenden Berechtigungen erhalten. 

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

Es scheint super zu funktionieren, hoffe das hilft jemandem!

15
Shaun

Wenn Sie einen Babel-Transpiler oder TypeScript 2 verwenden, gehen Sie folgendermaßen vor

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 async-Bereich können Sie leicht überprüfen, ob eine URL vorhanden ist:

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

console.log(isValidUrl); // true || false
4
Nik Sumeiko

Ich verwende dieses Skript, um zu überprüfen, ob eine Datei vorhanden ist (es behandelt auch das Problem zwischen Ursprung).

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

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

Nicht abgeholter SyntaxError: Unerwartetes Token <

3
Gëzim Musliaj

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;
    }
}
2
Ani Menon

Ein asynchroner Aufruf, um festzustellen, ob eine Datei vorhanden ist, ist der bessere Ansatz, da die Benutzererfahrung dadurch nicht beeinträchtigt wird, dass auf eine Antwort vom Server gewartet wird. Wenn Sie .open aufrufen, wobei der dritte Parameter auf false gesetzt ist (wie in vielen obigen Beispielen beispielsweise http.open('HEAD', url, false);), ist dies ein synchroner 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/

2
Jim Bergman

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 Ort und zeigt eine Warnung an, wenn sie nicht existiert

Erstellt zuerst die Funktion

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

Nachdem Sie die Funktion wie folgt verwendet haben

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

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

1

Dies ist eine Anpassung an die akzeptierte Antwort, aber ich konnte aus der Antwort nicht herausfinden, was ich brauchte, und musste testen, dass es eine Ahnung war, also stelle ich meine Lösung hier.

Wir mussten überprüfen, ob eine lokale Datei vorhanden war, und das Öffnen der Datei (PDF) nur zulassen, wenn sie vorhanden war. Wenn Sie die URL der Website nicht angeben, ermittelt der Browser automatisch den Hostnamen. Dies funktioniert auf localhost und auf dem Server:

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

    }
});
1
Josh Harris

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

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

Ich wollte eine Funktion, die eine Boolean-Funktion zurückgibt, ich bin auf Probleme mit der Schließung und der Asynchronität gestoßen. Ich habe diesen Weg 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);
},
0

Dies betrifft nicht die Frage des OPs, 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 hochgeladen hat, wäre das Feld avatarNULL. Daher würde ich ein Standard-Avatar-Bild aus dem Verzeichnis img einfügen.

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

dann

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

Sie müssen lediglich eine Anfrage an den Server senden, um die Überprüfung durchzuführen, und dann das Ergebnis an Sie zurücksenden.

Mit welcher Art von Server möchten Sie kommunizieren? Möglicherweise müssen Sie einen kleinen Dienst schreiben, um auf die Anfrage zu antworten.

0
MadcapLaugher