9. (ajax/에이젝스) post body FormData (폼 데이터) 파일 전송 실시 - input type file

---

[ 개발 환경 설정 ]

​

개발 툴 : Edit++

개발 언어 : ajax

---

[소스 코드]

 

  <!-- Jquery CDN 로드 : 항상 최신 버전 사용 -->
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>



  <!-- 내부 JS 지정 -->
  <script>

    /*
    [JS 요약 설명]
    1. document.getElementById : 특정 객체 id 를 설정합니다
    2. new FormData : 폼 데이터 객체를 생성합니다
    3. 참고 : processData, contentType을 false 값으로 설정해야 폼 데이터 형식으로 인식합니다
    */




    /* [서버 로컬 이미지 업로드 수행 함수] */
    function serverUploadImage(){
      console.log("");
      console.log("[serverUploadImage] : [start]");
      console.log("");


      // [전송시 필요한 url 및 데이터 정의 실시]
      var url = "http://localhost:7000/resourceInsertImage";
      var inputIdx = "1";


      // [전송 데이터 체크 실시]
      console.log("");
      console.log("[serverUploadImage] : [request]");
      console.log("[url] : " + url);
      console.log("[method] : " + "post body form data");
      console.log("[idx] : " + inputIdx); // 추가 form data에 key 값 삽입
      console.log(document.getElementById("input-image").files[0]); // body쪽 input file 태그 데이터 확인
      console.log("");


      // [input file 태그에 지정된 파일 얻어오기]
      var formData = new FormData(); // FormData 객체 생성
      formData.append("idx", inputIdx); // 추가 파라미터 삽입
      formData.append("file", document.getElementById("input-image").files[0]); // 실제 input file 데이터 삽입


      // [ajax : post body form data 형식으로 요청 실시]
      $.ajax({
        /* 요청 시작 부분 */
        url: url, //주소
        data: formData, //전송 데이터
        type: "POST", //전송 타입
        async: true, //비동기 여부
        enctype: "multipart/form-data", //form data 설정
        processData: false, //프로세스 데이터 설정 : false 값을 해야 form data로 인식합니다
        contentType: false, //헤더의 Content-Type을 설정 : false 값을 해야 form data로 인식합니다

        /* 응답 확인 부분 */
        success: function(response) {
          console.log("");
          console.log("[serverUploadImage] : [response] : " + response);
          console.log("");
        },

        /* 에러 확인 부분 */
        error: function(xhr) {
          console.log("");
          console.log("[serverUploadImage] : [error] : " + xhr);
          console.log("");
        },

        /* 완료 확인 부분 */
        complete:function(data,textStatus) {
          console.log("");
          console.log("[serverUploadImage] : [complete] : " + textStatus);
          console.log("");
        }
      });
    };

  </script>

 

---

[결과 출력]

---

[요약 설명]

​

/*

[JS 요약 설명]

1. document.getElementById : 특정 객체 id 를 설정합니다

2. new FormData : 폼 데이터 객체를 생성합니다

3. 참고 : processData, contentType을 false 값으로 설정해야 폼 데이터 형식으로 인식합니다

*/

---

[추가 참고 자료]

​

https://blog.naver.com/kkh0977/222432745922

13. (spring/스프링) Post Body Form Data 사용해 서버 로컬에 사진 이미지 저장 실시 - post man (포스트맨)

 

https://blog.naver.com/kkh0977/222431082586

43. (html/css/javascript/jquery) input file 및 FileReader 사용해 이미지 사진 업로드 수행 실시

---