jQuery HTML5 및 FormData를 사용하여 파일을 업로드하는 방법의 예

HTML5 이전에는 AJAX 파일 업로드를 구현하는 일련의 jQuery 기술과 플러그인이 있었습니다. HTML5에는 파일 업로드를 단순화하는 FormData 클래스가 도입되었습니다. 이 기사에서는 jQuery HTML5 및 FormData를 사용하여 파일을 업로드하는 방법의 예를 소개합니다.

$('#myform').on('sumbit', function(){
    var form = $(this);
    var formdata = false;
    if (window.FormData)
    {
        formdata = new FormData(form[0]);
    }
    var formAction = form.attr('action');
    $.ajax({
        url         : '/upload',
        data        : formdata ? formdata : form.serialize(),
        cache       : false,
        contentType : false,
        processData : false,
        type        : 'POST',
        success     : function(data, textStatus, jqXHR){
            // Callback code
        }
    });
    });

이를 효과적으로 달성하려면 플러그인, 플래시 또는 iframe 기술이 필요하지 않습니다. 다음은 이 코드가 예상대로 작동하도록 하는 몇 가지 요령입니다.

FormData의 인스턴스를 생성할 때 form 대신 form[0]을 전달합니다. 이는 실제 양식 요소를 의미하지만 jQuery 선택기는 아닙니다.

contentType을 정의하는 대신 false를 전달합니다. 이는 jQuery가 요청에 Content-Type 헤더를 추가하지 않음을 의미합니다.

processData를 false로 설정하면 jQuery가 데이터 값(FormData 기반)을 문자열로 변환하지 않습니다.

위 내용은 jQuery HTML5 및 FormData를 사용하여 파일을 업로드하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!