> 웹 프론트엔드 > JS 튜토리얼 > jQuery를 사용하여 비동기 AJAX 파일 업로드에 FormData를 어떻게 사용할 수 있습니까?

jQuery를 사용하여 비동기 AJAX 파일 업로드에 FormData를 어떻게 사용할 수 있습니까?

Linda Hamilton
풀어 주다: 2024-12-12 21:42:14
원래의
512명이 탐색했습니다.

How Can I Use FormData for Asynchronous AJAX File Uploads with jQuery?

비동기 AJAX 파일 업로드에 FormData 사용

AJAX 파일 업로드에 FormData를 활용하려면 중요한 단계는 다음과 같습니다.

준비

jQuery의 첫 번째 양식 요소를 활용하여 처리를 위해 FormData()를 제공합니다.

var form = $('form')[0]; // Use standard JavaScript object
var formData = new FormData(form);
로그인 후 복사

또는 다음을 위한 특정 데이터를 선택합니다. FormData():

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
formData.append('image', $('input[type=file]')[0].files[0]); // Attach file
로그인 후 복사

양식 보내기

jQuery를 사용하여 Ajax 요청 작성:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // Essential, do not omit (from jQuery 1.6+)
    processData: false, // Essential, do not omit
    // ... Other options like success, etc.
});
로그인 후 복사

이 요청은 데이터를 제출합니다. "multipart/form-data"가 있는 일반 양식과 같습니다. 인코딩.

참고:

  • 파일 전송에는 POST 요청이 필요하므로 "유형: 'POST'"는 필수입니다.
  • "contentType : false"는 jQuery 1.6 이상에서만 사용할 수 있습니다.

위 내용은 jQuery를 사용하여 비동기 AJAX 파일 업로드에 FormData를 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿