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 객체를 생성하고 선택한 파일을 여기에 추가하며 다음을 사용합니다. 지정된 URL로 formData를 보내기 위해 가져옵니다.

파일 업로드 상태 알림

파일 업로드 완료를 수신하려면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!