使用 Ajax 和 jQuery 检查文件是否存在 - 始终返回 200 响应

Question

所以我需要在向客户端显示特定数据之前检查文件是否存在......使用 jQuery 我有这个：

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

当我尝试运行该函数时：

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

（其中 example.com 是我的域），我总是收到 200 响应代码。 我想知道为什么会发生这种情况 - 难道我有一个通过 .htaccess 设置的自定义错误页面？ 或者，有没有更好的方法来做到这一点？

注意：正在使用 jQuery 1.5.1。

更新：它似乎被定向到我们通过 .htaccess 设置的自定义错误页面：

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

不确定这是否会导致冲突，或者如何解决它。

解决了

我检查了自定义 404 页面的标题，它返回了 200 响应代码。 必须硬编码标题：

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

然后将返回 404 响应代码 - 解决我的问题。

Answer 1

你为什么不通过回调成功和错误异步地意识到这一点？

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

   }
 });

Answer 2

看来我的问题存在于我的自定义 404 页面中，该页面返回 200 状态代码。 我不得不使用 php header() 函数对 404 响应代码进行硬编码，这解决了我遇到的问题。 现在，如果页面不存在，它会正确遵循：

使用一个简单的方法来测试当前页面/文件是否存在：

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

感谢@kalyfe 建议切换到异步方法。

Answer 3

$.get怎么样，它只是 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>

这里的好处是浏览器在浏览器中获取图像，因此您在使用它时不需要加载它两次，例如，对于 html 标签img 。 这里有一个例子：

 $('#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

异步/等待函数

这是一种现代的方式来做到这一点。 我一直在寻找针对折旧的同步 XHR 和 AJAX 的最佳未来证明解决方法。

我个人需要安全性，因此某些文件对公众不可用。 这意味着客户端功能将无法工作。 我需要一个服务器端脚本来检查这些文件是否存在。

我环顾四周，很难找到我需要它做的事情。 有充分记录的其他用途，但这对我有帮助，可以用作解决 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))

我想指出，您可以在来自 PHP 文件的 json 响应中包含任意数量的变量。 然而，与往常一样，数量越少越好。