Utilisation d'Ajax et de jQuery pour vérifier si un fichier existe - renvoie toujours une réponse 200

Question

J'ai donc besoin de vérifier si un fichier existe avant de montrer des données spécifiques aux clients...en utilisant jQuery j'ai ceci :

<script>
function fileExists(fileLocation) {
    var response = $.ajax({
        url: fileLocation,
        type: 'HEAD',
        async: false
    }).status;
    alert(response);
}
</script>

Quand j'essaie d'exécuter la fonction :

<script> fileExists('http://www.example.com/123.jpg'); </script>

(où exemple.com est mon domaine), je reçois TOUJOURS un code de réponse 200. Je me demandais pourquoi cela se produisait. Se pourrait-il que j'aie une page d'erreur personnalisée définie dans le fichier .htaccess ? Ou bien, existe-t-il une meilleure méthode pour faire cela ?

Nota : jQuery 1.5.1 est utilisé.

Mise à jour : Il semble qu'il soit dirigé vers notre page d'erreur personnalisée définie par .htaccess :

ErrorDocument 404 http://www.example.com/errors/notfound.php

Je ne sais pas si cela provoque le conflit ou comment le contourner.

SOLVED

J'ai vérifié les en-têtes de ma page 404 personnalisée, elle renvoie un code de réponse 200. J'ai dû coder l'en-tête en dur :

<?php header('HTTP/1.1 404 Not Found'); ?>

qui renvoie alors le code de réponse 404, ce qui résout mon problème.

Answer 1

Pourquoi ne pas réaliser cela de manière asynchrone avec les callbacks succès et erreurs ?

$.ajax({
   type: 'HEAD',
   url: fileLocation,
   success: function(msg){
     alert(msg);
   },
   error: function(jqXHR, textStatus, errorThrown){
     log(jqXHR);
     log(errorThrown);

   }
 });

Answer 2

Il s'est avéré que le problème provenait de ma page 404 personnalisée, qui renvoyait un code d'état 200. J'ai dû coder en dur le code de réponse 404 en utilisant la fonction php header(), ce qui a résolu le problème que j'avais. Maintenant, si la page n'existe pas, elle suit correctement :

Utilisation d'une méthode simple pour tester si la page/le fichier existe pour le moment :

$.ajax({
    type: 'HEAD',
    url: 'http://www.example.com/index.php',
    success: function() {
        alert('Page found.');
    },  
    error: function() {
        alert('Page not found.');
    }
});

Merci à @kalyfe pour la suggestion de passer à la méthode asynchrone.

Answer 3

Qu'en est-il $.get qui est juste un raccourci pour jQuery Ajax ?

// this file exists
$.get('https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg')
  .done(() => {console.log('file exists')})
  .fail(() => {console.log('File does not exist')}
)

// this file does not exist
$.get('https://example.com/inexistent.jpg')
  .done(() => {console.log('file exists')})
  .fail(() => {console.log('File does not exist')}
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ce qui est bien ici, c'est que le navigateur va chercher l'image dans le navigateur, donc vous n'avez pas besoin de la charger deux fois lorsque vous l'utilisez, par exemple, pour la balise html img . Voici un exemple :

$('#myButton').click(()=>{

  let imgUrl = $('#imgUrl').val();

  $.get(imgUrl)
  .done(() => {
    $('img').attr('src', imgUrl);
    $('#imgText').text('');
  })
  .fail(() => {
    $('#imgText').text('Image does not exist');
    $('img').attr('src', '');
  })

})

img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Image url: <input type="text" id="imgUrl" value="https://upload.wikimedia.org/wikipedia/commons/7/75/Woman_mechanic_working_on_engine_%28cropped%29.jpeg"><br>

<button id="myButton" type="button">click here to load image</button>

<div id="imgText"></div>
<img>

Answer 4

Fonction Async/Attente

C'est en quelque sorte une façon moderne de procéder. Je cherchais à trouver la meilleure solution de contournement pour le XHR synchrone et l'AJAX, qui ont été dépréciés.

Personnellement, j'ai besoin de sécurité pour que certains fichiers ne soient pas accessibles au public. Cela signifie qu'une fonction côté client ne fonctionnera pas. J'ai besoin d'un script côté serveur pour vérifier si ces fichiers existent.

J'ai regardé autour de moi et j'ai eu du mal à trouver ce que j'avais besoin de faire. Il existe d'autres utilisations bien documentées, mais celle-ci m'a aidé et peut être utilisée comme un autre moyen de résoudre la question/le problème de l'OP.

async function fetchAsync (q) {
  // await response of fetch call 
  // Your file now can get the file name to check via server side if it is there.
  let response = await fetch('https://yoursite.com/check_exists.php?'+q+(q==''?'':'&')+'time='+(new Date().getTime()));
  // only proceed once promise is resolved
  let data = await response.json();
  // only proceed once second promise is resolved
  return data;
}
var myFilePath = 'images/dingle.gif';
// trigger async function
// log response or catch error of fetch promise
fetchAsync('filepath='+myFilePath+'')
    .then(data => {
                 //
                 console.log(data.myJsonVar);
           if(data.myJsonVar == 1){ // the php file should check and return {"myJsonVar":1} if it found the file in question or {"myJsonVar":0}
                // Run scripts or functions about here...
                // For me it is to check if the file exists before an upload.
                // This saves the upload from failing after it is uploaded because it is a duplicate.
           }else{
                 // I run my upload script and functions
           }

     }
})
.catch(reason => console.log(reason.message))

Je tiens à souligner que vous pouvez avoir un nombre quelconque de variables dans la réponse json du fichier PHP. Cependant, comme toujours, le plus petit nombre est le mieux.