Comment vérifier si un fichier mentionné existe en utilisant JavaScript/jQuery ?-js tutoriel-php.cn

Comment vérifier si un fichier mentionné existe en utilisant JavaScript/jQuery ?

WBOY

Libérer： 2023-08-24 08:05:06

avant

1304 Les gens l'ont consulté

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

En utilisant JavaScript ou jQuery, nous pouvons vérifier si un fichier existe et récupérer des métadonnées sur le fichier telles que sa taille, son type de contenu, la date de la dernière modification, etc. sans récupérer le fichier lui-même. Utilisez la requête HTTP HEAD dans ce cas. Une requête HTTP HEAD est une requête HTTP qui demande au serveur de renvoyer les en-têtes HTTP pour une ressource spécifiée sans renvoyer la ressource réelle elle-même.

Les requêtes HTTP HEAD peuvent être envoyées à l'aide de plusieurs méthodes, mais la méthode la plus populaire utilise la méthode $.ajax() et l'objet XMLHttpRequest. L'utilisateur peut définir le type de requête comme « HEAD » en utilisant l'une de ces méthodes et peut également inclure une fonction de rappel pour gérer la réponse. Si le fichier existe dans la réponse du serveur, la fonction de rappel sera appelée. Si le fichier n'existe pas, la fonction de rappel n'est pas appelée et une exception est levée.

Si nous constatons que le fichier mentionné existe, nous pouvons prendre n'importe quelle action comme afficher le fichier réel ou afficher un message composé de métadonnées de fichier, etc. Si le fichier mentionné n'existe pas, nous pouvons afficher un message d'erreur. Cela améliorera les performances car nous n'essayons pas d'obtenir le fichier volumineux réel, mais nous vérifions son état.

Utilisez la méthode ajax()

Pour vérifier si un fichier existe à l'aide de la méthode $.ajax() dans jQuery, nous pouvons utiliser les étapes suivantes -

Créez un objet contenant les options type, "url", "succès" et "erreur". L'option type doit être définie sur "HEAD", l'option "url" doit être définie sur l'URL du fichier que nous voulons vérifier, et les options "success" et "error" doivent être des fonctions de rappel pour gérer la réponse si le la demande réussit respectivement ou échoue.
Appelez la méthode « $.ajax() » et transmettez l'objet que nous avons créé à l'étape 1 en tant que paramètre.
Dans la fonction de rappel "succès", si le fichier existe, nous pouvons entreprendre n'importe quelle action souhaitée. Par exemple, nous pouvons afficher des fichiers à l'utilisateur ou effectuer d'autres actions.
Dans la fonction de rappel "erreur", nous pouvons effectuer n'importe quelle action souhaitée si le fichier n'existe pas. Par exemple, nous pouvons afficher un message d'erreur ou rediriger l'utilisateur vers une autre page

Grammaire

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

Copier après la connexion

La syntaxe montre que l'attribut type est défini sur HEAD pour spécifier que nous envoyons une requête HEAD au serveur. La propriété url est définie sur l'URL du script ou de l'application côté serveur auquel nous souhaitons envoyer la requête.

Exemple

Dans cet exemple, nous utilisons la méthode ajax pour vérifier si le fichier mentionné existe. Nous avons utilisé la bibliothèque ajax de jQuery. Placez les champs de saisie dans différents chemins de fichiers pour vérifier s'ils existent. Si le fichier existe, la fonction success affiche le message "Le fichier mentionné existe !" sur la page web, et si le fichier n'existe pas, la fonction erreur affiche le message "Le fichier mentionné n'existe pas sur la page web !" .

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

Copier après la connexion

Utilisez la méthode XMLHttpRequest()

Pour vérifier si un fichier existe à l'aide de l'objet "XMLHttpRequest" en JavaScript, nous pouvons utiliser les étapes suivantes -

Créez un nouvel objet "XMLHttpRequest".
Utilisez la méthode "open()" de l'objet "XMLHttpRequest" pour spécifier l'URL du fichier que nous voulons vérifier, et définissez la méthode de requête sur "HEAD".
Utilisez la méthode "send()" de l'objet "XMLHttpRequest" pour envoyer la requête.
Vérifiez l'attribut "status" de l'objet "XMLHttpRequest" pour voir si le fichier existe. Si l'attribut 'status' est 200, le fichier existe ; si l'attribut 'status' est 404, le fichier n'existe pas.

Grammaire

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

Copier après la connexion

Dans la syntaxe ci-dessus, nous avons utilisé XMLHttpRequest() et en fonction du code d'état, nous pouvons écrire le code que le fichier existe ou non.

Exemple

Dans cet exemple, nous utilisons la méthode XMLHttpRequest() pour vérifier si le fichier mentionné existe. Placez les champs de saisie dans différents chemins de fichiers pour vérifier s'ils existent. Si le fichier existe, le code d'état sera 200 et nous afficherons le message "Ce fichier n'existe pas !", si le fichier n'existe pas, la fonction d'erreur affiche la page "Ce fichier n'existe pas !" .

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

Copier après la connexion

Vérifier si un fichier mentionné existe est une bonne pratique lorsque l'on travaille avec des fichiers de données volumineux, JavaScript et jQuery nous donnent la possibilité de le vérifier.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!