AJAX - 文件上传

AJAX 提供了一种灵活的方法来创建 HTTP 请求，该请求会将文件上传到服务器。我们可以使用 FormData 对象在请求中发送单个或多个文件。让我们借助以下示例来讨论这个概念 -

示例 - 上传单个文件

在以下示例中，我们将使用 XMLHttpRequest 上传单个文件。因此，首先我们创建一个简单的表单，其中包含文件上传按钮和提交按钮。现在我们编写 JavaScript，在其中获取 form 元素并创建一个事件，该事件在我们单击上传文件按钮时触发。在这种情况下，我们将上传的文件添加到 FormData 对象，然后创建一个 XMLHttpRequest 对象，该对象将使用 FormData 对象将文件发送到服务器并处理服务器返回的响应。


<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload a file-->  
<form id = "myForm">
   <input type="file" id="file"><br><br>
   <button type="submit">Upload File</button>
</form>
<script>
   document.getElementById('myForm').addEventListener('submit', function(x){
      // Prevent from page refreshing
      x.preventDefault();
   
      // Select the file from the system
      // Here we are going to upload one file at a time
      const myFile = document.getElementById('file').files[0];
   
      // Create a FormData to store the file
      const myData = new FormData();
      // Add file in the FormData
      myData.append("newFiles", myFile);
   
      // Creating XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Callback function to handle the response
      myhttp.onreadystatechange = function(){
         if (myhttp.readyState == 4 && myhttp.status == 200) {
            console.log("File uploaded Successfully")
         }
      };
   
      // Open the connection with the web server
      myhttp.open("POST", "https://httpbin.org/post", true);
   
      // Setting headers
      myhttp.setRequestHeader("Content-Type", "multipart/form-data");
   
      // Sending file to the server
      myhttp.send(myData);
   })
</script>
</body>
</html>

输出

文件上传

示例 − 上传多个文件

在以下示例中，我们将使用 XMLHttpRequest 上传多个文件。这里我们从 DOM 中的系统中选择两个属性为 file 的文件。然后我们将输入文件添加到数组中。然后我们创建一个 FormData 对象并将输入文件附加到该对象。然后我们创建一个 XMLHttpRequest 对象，该对象将使用 FormData 对象的文件发送到服务器并处理服务器返回的响应。


<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload multiple files-->  
<h2> Uploading Multiple files</h2>  
<input type="file">
<input type="file">
<button>Submit</button>
<script>
   const myButton = document.querySelector('button');
   myButton.addEventListener('click', () => {
      // Get all the input files in DOM with attribute type "file":
      const inputFiles = document.querySelectorAll('input[type="file"]');
   
      // Add input files in the array 
      const myfiles = [];
      inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0]));
   
      // Creating a FormData
      const myformdata = new FormData();
   
      // Append files in the FormData object
      for (const [index, file] of myfiles.entries()){
         // It contained reference name, file, set file name
         myformdata.append(`file${index}`, file, file.name);
      }
      // Creating an XMLHttpRequest object
      var myhttp = new XMLHttpRequest();
   
      // Callback function
      // To handle the response
      myhttp.onreadystatechange = function(){
         if (myhttp.readyState == 4 && myhttp.status == 200) {
            console.log("File uploaded Successfully")
         }
      };
      // Open the connection with the web server
      myhttp.open("POST", "https://httpbin.org/post", true);
   
      // Setting headers
      myhttp.setRequestHeader("Content-Type", "multipart/form-data");
   
      // Sending file to the server
      myhttp.send(myformdata);
   })
</script>
</body>
</html>

输出

文件上传 2

结论

这就是我们在 XMLHttpRequest 的帮助下将文件上传到给定 URL 的方法。在这里，我们可以上传任何类型的文件，例如 jpg、pdf、word 等，也可以上传任意数量的文件，例如一次上传一个文件或一次上传多个文件。现在在下一篇文章中，我们将学习如何使用 XMLHttpRequest 创建一个 FormData 对象。

打印本页