Heim > Artikel > Web-Frontend > Wie kann ich mithilfe von JavaScript/jQuery überprüfen, ob eine erwähnte Datei vorhanden ist?

Wie kann ich mithilfe von JavaScript/jQuery überprüfen, ob eine erwähnte Datei vorhanden ist?

WBOYnach vorne: 2023-08-24 08:05:061352Durchsuche

如何使用 JavaScript/jQuery 检查提到的文件是否存在？

Mit JavaScript oder jQuery können wir prüfen, ob eine Datei vorhanden ist, und Metadaten über die Datei wie Größe, Inhaltstyp, Datum der letzten Änderung usw. abrufen, ohne die eigentliche Datei abzurufen. Verwenden Sie in diesem Fall die HTTP-HEAD-Anfrage. Eine HTTP-HEAD-Anfrage ist eine HTTP-Anfrage, die den Server auffordert, die HTTP-Header für eine angegebene Ressource zurückzugeben, ohne die eigentliche Ressource selbst zurückzugeben.

Es gibt mehrere Möglichkeiten, eine HTTP-HEAD-Anfrage zu senden, die beliebteste ist jedoch die Verwendung der Methode $.ajax() und des XMLHttpRequest-Objekts. Der Benutzer kann den Anforderungstyp mit einer dieser Methoden als „HEAD“ definieren und auch eine Rückruffunktion zur Verarbeitung der Antwort einschließen. Wenn die Datei in der Serverantwort vorhanden ist, wird die Rückruffunktion aufgerufen. Wenn die Datei nicht vorhanden ist, wird die Callback-Funktion nicht aufgerufen und eine Ausnahme ausgelöst.

Wenn wir feststellen, dass die genannte Datei vorhanden ist, können wir beliebige Maßnahmen ergreifen, z. B. die tatsächliche Datei anzeigen oder eine Meldung mit Dateimetadaten usw. anzeigen. Wenn die genannte Datei nicht existiert, können wir eine Fehlermeldung anzeigen. Dadurch wird die Leistung verbessert, da wir nicht versuchen, die eigentliche große Datei abzurufen; stattdessen überprüfen wir ihren Status.

Verwenden Sie die Ajax()-Methode

Um mit der Methode $.ajax() in jQuery zu überprüfen, ob eine Datei vorhanden ist, können wir die folgenden Schritte ausführen -

Erstellen Sie ein Objekt mit den Optionen Typ, „URL“, „Erfolg“ und „Fehler“. Die Typoption sollte auf „HEAD“ gesetzt sein, die Option „url“ sollte auf die URL der Datei eingestellt sein, die wir überprüfen möchten, und die Optionen „success“ und „error“ sollten Rückruffunktionen sein, um die Antwort zu verarbeiten, wenn die Die Anfrage ist erfolgreich bzw. schlägt fehl.
Rufen Sie die Methode „$.ajax()“ auf und übergeben Sie das Objekt, das wir in Schritt 1 erstellt haben, als Parameter.
Wenn die Datei in der Callback-Funktion „Erfolg“ vorhanden ist, können wir jede gewünschte Aktion ausführen. Beispielsweise können wir dem Benutzer Dateien anzeigen oder andere Aktionen ausführen.
In der Callback-Funktion „Fehler“ können wir jede gewünschte Aktion durchführen, wenn die Datei nicht existiert. Beispielsweise können wir eine Fehlermeldung anzeigen oder den Benutzer auf eine andere Seite weiterleiten

Grammatik

$.ajax({ 
   url: url,
   type: 'HEAD',
   success: function () {
      // The mentioned file exist!
   },
   error: function () {
      // The mentioned file does not exist!
   },
})

Die Syntax zeigt, dass das Typattribut auf HEAD gesetzt ist, um anzugeben, dass wir eine HEAD-Anfrage an den Server senden. Die URL-Eigenschaft wird auf die URL des serverseitigen Skripts oder der serverseitigen Anwendung festgelegt, an die wir die Anfrage senden möchten.

Beispiel

In diesem Beispiel verwenden wir die Ajax-Methode, um zu überprüfen, ob die genannte Datei vorhanden ist. Wir haben die Ajax-Bibliothek von jQuery verwendet. Legen Sie Eingabefelder in verschiedene Dateipfade ab, um zu prüfen, ob sie vorhanden sind. Wenn die Datei vorhanden ist, zeigt die Erfolgsfunktion die Meldung „Die genannte Datei existiert nicht“ auf der Webseite an, und wenn die Datei nicht existiert, zeigt die Fehlerfunktion die Meldung „Die genannte Datei existiert nicht!“ an .

<html>
<head>
   <script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
   <h2>Checking if Mentioned <i>File Exists or not</i> using JavaScript/jQuery</h2>
   <h4>Enter file path:</h4>
   <input id = "file_path" name = "file_path" />
   <button onclick="checkFile()">Check File</button>
   <div id = "root" style = "padding: 10px; background: #b8f0ea"></div> 
   <script>
      let root = document.getElementById('root')
      let file_path = document.getElementById('file_path')
      function checkFile() {
         $.ajax({
            url: file_path.value,
            type: 'HEAD',
            success: function () {
               root.innerHTML = 'The mentioned file exist!'
            },
            error: function () {
               root.innerHTML = 'The mentioned file does not exist!'
            },
         })
      }
   </script>
</body>
</html>

Verwenden Sie die XMLHttpRequest()-Methode

Um mithilfe des Objekts „XMLHttpRequest“ in JavaScript zu überprüfen, ob eine Datei vorhanden ist, können wir die folgenden Schritte ausführen -

Erstellen Sie ein neues „XMLHttpRequest“-Objekt.
Verwenden Sie die Methode „open()“ des Objekts „XMLHttpRequest“, um die URL der Datei anzugeben, die wir überprüfen möchten, und setzen Sie die Anforderungsmethode auf „HEAD“.
Verwenden Sie die Methode „send()“ des Objekts „XMLHttpRequest“, um die Anfrage zu senden.
Überprüfen Sie das „status“-Attribut des „XMLHttpRequest“-Objekts, um zu sehen, ob die Datei vorhanden ist. Wenn das Attribut „status“ 200 ist, existiert die Datei; wenn das Attribut „status“ 404 ist, existiert die Datei nicht.

Grammatik

var http = new XMLHttpRequest()
http.open('HEAD', url, false)
http.send()
if (http.status === 200) {
   
   //This file exist!
} else {
   
   //This file does not exist!
}

In der obigen Syntax haben wir XMLHttpRequest() verwendet und basierend auf dem Statuscode können wir den Code schreiben, unabhängig davon, ob die Datei existiert oder nicht.

Beispiel

In diesem Beispiel verwenden wir die Methode XMLHttpRequest(), um zu überprüfen, ob die erwähnte Datei existiert. Legen Sie Eingabefelder in verschiedenen Dateipfaden ab, um zu prüfen, ob sie vorhanden sind. Wenn die Datei vorhanden ist, lautet der Statuscode 200 und wir zeigen die Meldung „Diese Datei existiert nicht!“ an. Wenn die Datei nicht vorhanden ist, zeigt die Fehlerfunktion die Seite „Diese Datei existiert nicht im Netzwerk!“ an .

<html>
<body>
   <h2>Checking If Mentioned File Exists or not using JavaScript/ jQuery</h2>
   <h4>Enter file path:</h4>
   <input id = "file_path" name = "file_path" />
   <button onclick = "checkFile()">Check File</button>
   <div id = "root" style = "padding: 10px; background: #f0ecb8"></div>
   <script>
      let root = document.getElementById('root')
      let file_path = document.getElementById('file_path')
      function checkFile() {
         var http = new XMLHttpRequest()
         http.open('HEAD', file_path.value, false)
         http.send()
         if (http.status === 200) {
            root.innerHTML = 'This file exist!'
         } else {
            root.innerHTML = 'This file does not exist!'
         }
      }
   </script>
</body>
</html>

Überprüfen, ob eine erwähnte Datei vorhanden ist, ist eine gute Vorgehensweise bei der Arbeit mit großen Datendateien. JavaScript und jQuery geben uns die Möglichkeit, sie zu überprüfen.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von JavaScript/jQuery überprüfen, ob eine erwähnte Datei vorhanden ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery ajax Error 回调函数对象 http

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie lösche ich mit JavaScript eine Spalte aus einer HTML-Tabelle?Nächster Artikel：Wie lösche ich mit JavaScript eine Spalte aus einer HTML-Tabelle?

In Verbindung stehende Artikel

Mehr sehen