如何使用 JavaScript 将文件传输到服务器？

使用 JavaScript 上传文件

当网页允许用户使用文件输入元素选择文件时，可以从以下位置检索所选文件的名称document.getElementById("图像文件").value.但是如何将此文件传输到服务器？

对于文件上传，JavaScript 提供了多种方法。一种选择是使用 Fetch API：

纯 JS（Fetch）

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

此方法创建一个 formData 对象，将选定的文件附加到它，并使用fetch 将 formData 发送到指定 URL。

文件上传状态通知

要监听文件上传完成，可以使用 XMLHttpRequest 对象创建 FormData 对象并设置其 onreadystatechange 事件监听器。当文件上传完成时，事件的readyState属性将为4。

// Register file input
const fileInput = document.getElementById('image-file');

// Add event listener for onreadystatechange
fileInput.addEventListener('change', (e) => {
  const files = e.target.files;
  
  if (files.length > 0) {
    // Create a FormData object
    const formData = new FormData();
    
    // Append selected files to FormData object
    for (const file of files) {
      formData.append('files', file);
    }

    // Create an XMLHttpRequest object
    const xhr = new XMLHttpRequest();

    // Open a POST request to the server
    xhr.open('POST', '/upload/image');

    // Set the onreadystatechange event listener
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // File upload completed successfully
          console.log('File uploaded successfully!');
        } else {
          // File upload failed
          console.error('File upload failed!');
        }
      }
    };

    // Send the FormData object
    xhr.send(formData);
  }
});

以上是如何使用 JavaScript 将文件传输到服务器？的详细内容。更多信息请关注PHP中文网其他相关文章！