JavaScript를 사용하여 서버로 파일을 전송하는 방법은 무엇입니까?

JavaScript를 사용한 파일 업로드

웹페이지에서 사용자가 파일 입력 요소를 사용하여 파일을 선택할 수 있는 경우 선택한 파일 이름은 다음에서 검색할 수 있습니다. document.getElementById("image-file").value. 그런데 이 파일을 서버로 어떻게 전송합니까?

파일 업로드의 경우 JavaScript는 여러 가지 접근 방식을 제공합니다. 한 가지 옵션은 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});

이 접근 방식은 formData 객체를 생성하고 선택한 파일을 여기에 추가하며 다음을 사용합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!