AJAX 이미지 업로드 문제를 해결하는 방법: 양식 제출 및 업로드 트리거?

Ajax 지원 이미지 업로드

이미지 업로드를 위해 양식을 AJAX로 변환하려고 하면 양식이 응답하지 않는 문제가 발생할 수 있습니다. 제출 또는 업로드 기능을 트리거하지 않는 파일 선택. 솔루션에 대한 자세한 설명은 다음과 같습니다.

양식 제출 문제 해결

원본 JavaScript 코드에는 AJAX 호출 내에서 적절한 오류 및 성공 처리가 부족했습니다. 이 문제를 해결하려면 다음을 추가하세요.

success:function(data){
    console.log("success");
    console.log(data);
},
error: function(data){
    console.log("error");
    console.log(data);
}

이러한 기능은 서버의 응답을 검사하고 잠재적인 오류나 성공적인 업로드를 처리하는 방법을 제공합니다.

다음에서 업로드 실행 파일 선택

파일 선택 시 즉시 업로드 기능을 실행하려면 파일 입력에 다음 이벤트 리스너를 추가하세요. 요소:

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

이 코드는 파일 입력 요소 값의 변경 사항을 수신하고 자동으로 양식을 제출하여 AJAX 업로드를 시작합니다.

전체 코드 조각

위 솔루션을 결합하면 최종 JavaScript 코드는 다음과 같습니다. 이:

$(document).ready(function (e) {
    $('#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);
            }
        });
    }));

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

위 내용은 AJAX 이미지 업로드 문제를 해결하는 방법: 양식 제출 및 업로드 트리거?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!