Ajax serialize () 양식 양식 제출 시 파일 형식 을 업로드 할 수 없 으 면 어떻게 합 니까?

프론트 폼 의 제출 방식 은 여러 가지 가 있 습 니 다. 예 를 들 어 1. form 폼 submit 을 직접 제출 하 는 방법 2. Ajax 가 제출 하 는 방법 3. jquery 가 제출 하 는 방법 4. 원생 js 가 제출 하 는 방법
모든 방법 은 장점 과 부족 이 있 습 니 다. 어떤 방법 은 간단 하고 직접적 이 며 어떤 방법 은 복잡 하 게 쓰 지만 사용 하기에 편리 합 니 다. 최근 프로젝트 에서 Ajax 폼 제출 문 제 를 만 났 습 니 다. 여기 서 ajax 가 제출 한 두 가지 방식 을 정리 하 겠 습 니 다.
1. serialize () 방법:
폼 값 을 정렬 하여 URL 인 코딩 텍스트 문자열 을 만 듭 니 다.우 리 는 하나 이상 의 폼 요소 (예 를 들 어 input 및 / 또는 텍스트 상자) 나 form 요소 자 체 를 선택 할 수 있 습 니 다.직렬 화 된 값 은 AJAX 요청 을 생 성 할 때 URL 조회 문자열 에 사용 할 수 있 습 니 다.사용 하 는 문법 은:

$("form").serialize()

여기 있 는 $(form) 작업 대상 은 폼 요소 집합 을 대표 하 는 jQuery 대상 이지 js 대상 이 아 닙 니 다.
제출 방법의 코드 세그먼트:

$('form').submit(function() {
  alert($(this).serialize());
  return false;
});

최종 서열 화 후 폼 에 있 는 데 이 터 는 다음 과 같은 방식 으로 백 엔 드 에 제출 됩 니 다. a = 1 & b = 2 & c = 3 & d = 4 & e = 5 와 같은 방식 으로 폼 을 처리 할 때 적용 되 는 input 태그 형식 은 제한 되 어 있 습 니 다. text, checkbox, select, date 등 일반적인 형식 에 만 적 용 됩 니 다. 그러나 file 파일 형식의 input 상자 에는 적용 되 지 않 습 니 다.그럼 ajax 제출 방식 을 사용 할 때 file 형식의 input 상자 데 이 터 를 어떻게 제출 해 야 합 니까?
2. FormData 대상 을 봉인 하고 $. ajax 로 직접 제출
포럼 에 서 는 formData 의 패 키 징 방식 에 대해 언급 되 었 습 니 다. form 폼 의 내용 을 formdata 의 데이터 형식 으로 패 키 징 할 수 있 습 니 다. FormData 대상 은 form 의 모든 폼 요소 의 name 과 value 를 하나의 query String 으로 구성 하여 배경 에 제출 할 수 있 습 니 다. Ajax 를 사용 하여 제출 할 때 FormData 대상 을 사용 하면 query String 의 작업량 을 줄 일 수 있 습 니 다.
FormData 의 사용 방법 도 매우 간단 합 니 다. form 폼 대상 에 직접 전송 하면 됩 니 다. 다음 과 같 습 니 다.

var form = $('#form1');  
var formdata = new FormData(form);  

이러한 방식 으로 데 이 터 를 밀봉 한 후 file 형식의 파일 데 이 터 는 키 가 맞 는 방식 으로 formdata 에 밀봉 한 다음 ajx 로 제출 할 수 있 습 니 다. 방법 은 다음 과 같 습 니 다.

 $.ajax({  
        type : "POST",  
        url : "houtai/123.do",  
        data : formData,
        async: false,  
        cache: false,  
        contentType: false,  
        processData: false,
        success : function(msg) {  
            if(msg){
            alert('    ！');
            } 
        }  
});  

한 가지 주의해 야 할 것 은 formdata 방식 으로 제출 할 때 async: false 를 추가 해 야 합 니 다. 동기 화 되 지 않 으 면 배경 에서 프론트 데스크 에서 보 내 온 file 파일 데 이 터 를 받 을 수 없습니다. 이러한 제출 방식 은 type 형식 탭 을 제출 할 수도 있 고 제출 한 후에 결 과 를 되 돌려 받 을 수도 있 습 니 다. 편리 하고 실 용적 입 니 다.
form 폼 을 제출 하 는 방식 은 아직도 많 습 니 다. 본 고 는 ajax 의 두 가지 제출 방식 에 대한 정리 일 뿐 앞으로 더 좋 은 제출 방식 이나 제출 플러그 인 을 만 날 수 있 기 를 바 랍 니 다.
오 랜 만 에 총 결 블 로 그 를 만 들 었 습 니 다. 2018 년 에 견 뎌 냈 으 면 좋 겠 습 니 다!!