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

有时我们想通过文件的路径上传一个文件，但很少有文件不存在。在这种情况下，我们必须回应用户给定的路径没有找到任何文件或在提到的文件中不存在。

方法一：使用 jQuery 的ajax() 方法检查给定 URL 上是否存在文件。 ajax() 方法用于触发异步 HTTP 请求。如果文件存在，ajax() 方法将依次调用ajaxSuccess() 方法，否则它将调用Error函数。

• 示例：此示例说明了上述方法。

    
  
      
          How to check if file exist using jquery
      
      
      
      
          body {
              text-align: center;
          }
            
          h1 {
              color: green;
          }
            
          #output {
              color: green;
              font-size: 20px;
              font-weight: bold;
          }
      
  
    
  
       
          GeeksforGeeks 
      
    
      
          Enter File Path:
      
    
      
    
      
          click here
      
    
      
    
      
          $(document).ready(function() {
              
              $("#Check_File").click(function() {
                  
                  var url = $("#File_URL").val();
                  if (url != "") {
                      $.ajax({
                          url: url,
                          type: 'HEAD',
                          error: function() 
                          {
                              $("#output").text("File doesn't exists");
                          },
                          success: function() 
                          {
                              $("#output").text('File exists');
                          }
                      });
                  } else {
                      $("#Output").text("Please enter File URL");
                  }
              });
          });
      
  
    

• 输出：
  

方法二：使用XMLHttpRequest()方法触发ajax请求。如果 HTTP 状态为 200，则文件存在，否则文件不存在。

• 示例：此示例说明了上述方法。

    
  
      
          How to check if file exist or 
          not on HTTP status is 200
      
      
          body {
              text-align: center;
          }
            
          h1 {
              color: green;
          }
            
          #output {
              color: green;
              font-size: 20px;
              font-weight: bold;
          }
      
  
    
  
       
          GeeksforGeeks 
      
    
      
          Enter File Path: 
      
    
      
      
          click here
      
    
      
    
      
          var url = document.getElementById("File_URL");
          var output = document.getElementById("output");
          var http = new XMLHttpRequest();
    
          function checkFileExist() {
              if (url.length === 0) {
                  output.innerHTML = "Please enter File URL";
              } else {
                  http.open('HEAD', url, false);
                  http.send();
                  if (http.status === 200) {
                      output.innerHTML = "File exists";
                  } else {
                      output.innerHTML = "File doesn't exists";
                  }
              }
          }
      
  
    
                      

• 输出： HTTP 状态不是 200，因此如果文件存在，它将显示不存在，直到状态为 200。
  

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。