Wie übertrage ich Dateien mit JavaScript an einen Server?

Datei-Upload mit JavaScript

Wenn eine Webseite es Benutzern ermöglicht, Dateien mithilfe eines Dateieingabeelements auszuwählen, kann der Name der ausgewählten Datei abgerufen werden document.getElementById("image-file").value. Doch wie übermittelt man diese Datei an einen Server?

Für Datei-Uploads bietet JavaScript mehrere Ansätze. Eine Option ist die Verwendung der Fetch-API:

Pure 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});

Dieser Ansatz erstellt ein formData-Objekt, hängt die ausgewählte Datei daran an und verwendet Fetch, um die formData an die angegebene URL zu senden.

Benachrichtigung zum Datei-Upload-Status

Um auf den Abschluss des Datei-Uploads zu warten, können Sie das XMLHttpRequest-Objekt verwenden, um ein FormData-Objekt zu erstellen und legen Sie seinen onreadystatechange-Ereignis-Listener fest. Wenn der Datei-Upload abgeschlossen ist, ist die readyState-Eigenschaft des Ereignisses 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);
  }
});

Das obige ist der detaillierte Inhalt vonWie übertrage ich Dateien mit JavaScript an einen Server?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!