JavaScript로 파일을 업로드하는 방법은 무엇입니까?

JavaScript를 사용하여 파일을 업로드하는 방법

JavaScript를 사용하여 파일을 업로드하려면 다음 단계를 활용할 수 있습니다.

1. 양식 사용 데이터:

   • 파일과 추가 데이터를 저장할 FormData 개체를 만듭니다.
   • formData.append() 를 사용하여 양식 데이터에 파일을 추가합니다.

2. XHR 만들기 요청:

   • XHR(XMLHttpRequest) 객체를 생성합니다.
   • 요청 방법을 "POST"로 설정하고 URL을 업로드 엔드포인트로 설정합니다.
   • XHR 객체의 body 속성을 formData로 설정합니다. .

3. 업로드 이벤트 수신:

   • 로드, 진행 및 진행을 위해 XHR 개체에 이벤트 리스너를 추가합니다. 오류 이벤트.
   • 이러한 이벤트 핸들러에서는 업로드 상태를 처리하고 응답.

예제 코드:

const formData = new FormData();
const fileInput = document.getElementById('image-file');
const file = fileInput.files[0];

formData.append('photo', file);

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload/image');
xhr.send(formData);

xhr.addEventListener('load', () => {
  // Handle successful upload
});

xhr.addEventListener('progress', (e) => {
  // Monitor upload progress
});

xhr.addEventListener('error', (e) => {
  // Handle upload errors
});

순수 JavaScript:

XHR 없이 순수 JavaScript를 사용하려면 FormData와 함께 가져오기 API를 사용할 수 있습니다. .

예:

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();

formData.append("photo", photo);
fetch('/upload/image', { method: "POST", body: formData });

위 내용은 JavaScript로 파일을 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!