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

为什么不与回调success and error异步实现这一点？

$.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响应中包含任意数量的变量。但是，数量越少越好。

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

4 个答案: