Ajax 이미지 업로드에 대한 제출 및 변경 이벤트를 처리하는 방법은 무엇입니까?

Ajax 업로드: 이벤트 처리 제출 및 변경

문제 개요:
활용하도록 기존 양식 개선 이미지 업로드를 위한 Ajax, 제공된 코드가 불완전한 것으로 보이므로 추가 작업이 필요함 기능.

해결책:

1. Ajax로 양식 제출 구현:

양식 제출을 위한 이벤트 핸들러에서 제공된 코드에 중요한 요소가 부족합니다.

• 성공 및 오류 함수: Ajax에서는 응답을 처리하기 위해 성공 및 오류 함수가 모두 필요합니다. server.
• 양식 데이터: 양식 데이터를 보내려면 formData = new FormData(this);를 사용합니다. Ajax 호환성을 위해 contentType 및 processData를 false로 설정합니다.

수정된 코드:

$('#imageUploadForm').on('submit', (function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log("success");
            console.log(data);
        },
        error: function(data) {
            console.log("error");
            console.log(data);
        }
    });
}));

2. 파일 선택 시 업로드 트리거:

파일 선택 시 업로드를 시작하려면 파일 입력 시 변경 이벤트를 사용하세요.

$("#ImageBrowse").on("change", function() {
    $("#imageUploadForm").submit();
});

이러한 수정을 통해 Ajax 업로드 기능은 예상대로 작동합니다.

위 내용은 Ajax 이미지 업로드에 대한 제출 및 변경 이벤트를 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!