檢查JQUERY的同一個文件夾中是否存在1個或多個同名但擴展名不同的文件

Question

我編寫這段代碼是為了檢查“上傳”文件夾中是否有同名“計划”的文件，但只有 pdf 或 html 擴展名。 我知道，這種語法沒有經過優化，但它可以工作。 我認為有更短更簡單的方法。

有人有什么例子可以和我分享嗎？

謝謝。

<script>
    function FileExists(url)
    {
        var http = new XMLHttpRequest();
        http.open('HEAD', url, false);
        http.send();
        return http.status!=404;
    }
    
    var source = "upload/planning_11";
    var pdf_file = FileExist(source+".pdf");            
    var html_file = FileExist(source+".html");  
            
    if (pdf_file==true && html_file==false) {
    $('#exist_file_pdf').show();
    $('#exist_file_html').hide();
    $('#exist_file_all').hide();
    } else if (pdf_file==false && html_file==true) {
    $('#exist_file_html').hide();
    $('#exist_file_html').show();
    $('#exist_file_all').hide();
    } else if (pdf_file==true && html_file==true) {
    $('#exist_file_html').hide();
    $('#exist_file_html').hide();
    $('#exist_file_all').show();
    } else if (pdf_file==false && html_file==false) {
    $('#exist_file_html').hide();
    $('#exist_file_html').hide();
    $('#exist_file_all').hide();
    }
</script>
    
    <div id="exist_file_pdf">PDF planning file exist</div>
    <div id="exist_file_html">HTML planning files exist</div>
    <div id="exist_file_all">PDF and HTML planning files exists !</div>

Answer 1

不要使用異步錯誤

相反，您可以這樣做

const source = "upload/planning_11";
const pdfUrl = source + ".pdf";
const htmlUrl = source + ".html";
$('#exist_file_all').hide();
$('#exist_file_html').hide();
$('#exist_file_pdf').hide();

$.ajax({
  type: 'HEAD',
  url: pdfUrl
  success: function(msg) {
    $('#exist_file_pdf').show();
    $.ajax({
      type: 'HEAD',
      url: htmlUrl
      success: function(msg) {
        $('#exist_file_html').show();
        if ($('#exist_file_html').is(":visible") && 
            $('#exist_file_pdf').is(":visible")) {
          $('#exist_file_all').show();
          $('#exist_file_html').hide();
          $('#exist_file_pdf').hide();
        } 
      }
    });
  }
});