Bagaimana untuk Menghantar Fail ke Pelayan Menggunakan JavaScript?

Muat Naik Fail dengan JavaScript

Apabila halaman web membenarkan pengguna memilih fail menggunakan elemen input fail, nama fail yang dipilih boleh diambil daripada document.getElementById("image-file").value. Tetapi bagaimana anda menghantar fail ini ke pelayan?

Untuk muat naik fail, JavaScript menawarkan beberapa pendekatan. Satu pilihan ialah menggunakan API Ambil:

JS Tulen (Ambil)

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

Pendekatan ini mencipta objek formData, menambahkan fail yang dipilih padanya dan menggunakan Ambil untuk menghantar formData ke URL yang ditentukan.

Pemberitahuan Status Muat Naik Fail

Untuk mendengar pelengkapan muat naik fail, anda boleh menggunakan objek XMLHttpRequest untuk mencipta objek FormData dan tetapkan pendengar acara onreadystatechangenya. Apabila muat naik fail selesai, sifat readyState acara ialah 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);
  }
});

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Fail ke Pelayan Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!