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 중국어 웹사이트의 기타 관련 기사를 참조하세요!