如何使用 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中文網其他相關文章！