Ajax를 사용하여 데이터와 파일을 동시에 업로드하는 방법은 무엇입니까?
P粉012875927
P粉012875927 2023-08-20 14:33:32
0
2
381

jQuery와 Ajax를 사용하여 데이터와 파일을 제출하고 있는데 데이터와 파일을 모두 하나의 형식으로 보내는 방법을 잘 모르겠습니다.

현재 두 가지 방법을 거의 동일한 방식으로 사용하고 있지만 데이터를 배열로 수집하는 방식이 다릅니다. 데이터는 .serialize();를 사용하고 파일은 ;= new FormData($(this)[0]);

이 두 가지 방법을 결합하여 Ajax를 통해 파일과 데이터를 하나의 형식으로 업로드할 수 있습니까?

데이터 jQuery, Ajax 및 html

$("form#data").submit(function(){ var formData = $(this).serialize(); $.아약스({ URL: window.location.pathname, 유형: '포스트', 데이터: 양식데이터, 비동기: 거짓, 성공: 함수(데이터) { 경고(데이터) }, 캐시: 거짓, 콘텐츠 유형: 거짓, 프로세스 데이터: 거짓 }); 거짓을 반환; }); 
<버튼>제출

문서 jQuery, Ajax 및 html

$("form#files").submit(function(){ var formData = new FormData($(this)[0]); $.아약스({ URL: window.location.pathname, 유형: '포스트', 데이터: 양식데이터, 비동기: 거짓, 성공: 함수(데이터) { 경고(데이터) }, 캐시: 거짓, 콘텐츠 유형: 거짓, 프로세스 데이터: 거짓 }); 거짓을 반환; });  <입력 이름="이미지" 유형="파일" /> <버튼>제출

Ajax를 통해 데이터와 파일을 하나의 형식으로 보낼 수 있도록 위의 내용을 어떻게 결합합니까?

제 목표는 Ajax를 통해 이 모든 양식을 함께 보내는 것입니다. 이것이 가능합니까?

    <입력 이름="이미지" 유형="파일" /> <버튼>提交


P粉012875927
P粉012875927

모든 응답 (2)
P粉794177659

또 다른 옵션은 iframe을 사용하고 양식의 대상을 iframe으로 설정하는 것입니다.

다음을 시도해 볼 수 있습니다(jQuery를 사용함):

으아악

모든 브라우저에서 작동하며 데이터를 직렬화하거나 준비할 필요가 없습니다. 한 가지 단점은 진행 상황을 모니터링할 수 없다는 것입니다.

또한 적어도 Chrome의 경우 요청은 개발자 도구의 "xhr" 탭 아래에 표시되지 않고 "doc" 아래에 표시됩니다.

    P粉064448449

    제 문제는 잘못된 jQuery 식별자를 사용하는 것이었습니다.

    양식을 사용하여ajax를 사용하여데이터와 파일을 업로드할 수 있습니다.

    PHP + HTML

    으아악

    jQuery + Ajax

    으아악

    단순화된 버전

    으아악
      최신 다운로드
      더>
      웹 효과
      웹사이트 소스 코드
      웹사이트 자료
      프론트엔드 템플릿
      회사 소개 부인 성명 Sitemap
      PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!