FormData(); 파일 전송시 써먹었음

공지사항에 첨부파일을 진행하려고 하는데....기존에 배웠던 form으로 한번에 하는게 아니라

먼저 파일을 id화 하고 그 id를 먼저 받은 다음 그다음에 주내용을 공지사항으로 저장 시키는 것이다.

파일 보내는 건 멀티 파일......멀티파일 전송에 대한건 다음에 공부.......^^

<table id="user_data_table" class="table table-striped table-bordered data-custom-button">						
    <tr>
        <td class="col-md-2">제목</td>
        <td class="col-md-10"><input type="text" name="subject"  class="form-control"></td>
    </tr>
    <tr>
        <td>첨부파일</td>
        <td><input type="file"  id="file_in" name="file"></td>
    </tr>

일부만 발최함........ 첨부파일을 저장시 먼저 임시 id를 얻어야 해서 ajax로 진행

 

var formData = new FormData($('form[name=noticeForm]')[0]);
	   formData += $("form[name=noticeForm]").serialize();
		
		$.ajax({
			type : 'post',
			url : 'mg/board/goBoardInfoPop.do',
			enctype : 'multipart/form-data',
			data : formData,
			processData: false,
			contentType:false,
			cache: false,
			timeout: 600000,
			success : function(data){		
				alert('공지사항을 등록하였습니다!');
				Notice_write(data);
			},
			error : function(e){
				alert('파일 등록 실패하였습니다.');
			}
		});   
	}

html form을 대체하는 FormData객체///// jsp본문의 form과는 별개이다.

이걸하면서 몇가지 필요한 함수 더 확인해 본다.

let formData = new FormData(); // 새로운 폼 객체 생성
formData.append('name','hyemin'); // 폼 데이터를 스크립트로 추가
formData.append('item','hi'); // <input name="item" value="hi"> 와 같다.
formData.append('item','hello'); // <input name="item" value="hello">

// 만일 HTML에 미리 form 태그가 있으면 제이쿼리나 자바스크립트로 가져올 수도 있다.
let formData1 = new FormData($("#form Id")); // 제이쿼리인 경우
let formData2 = new FormData(document.getElementById("form Id")); // 자바스크립트로 가져 올 경

formData.append(name, value)
// - form의 name 과 value 를 필드의 추가
// - input의 name 속성과 value 입력값 역할을 한다고 생각 하면 된다.
// 자바스크립트로 직접 form 태그를 생성

 
formData.append(name, blob, fileName)
// - input 의 type 이 'file' 인 경우에 사용
// - fileName은 file의 이름의 해당
 
formData.delete(name)
// - 주어진 name 으로 필드를 제거
 
formData.get(name)
// - 주어진 name 의 해당 하는 필드 value를 반환
 
formData.getAll(name)
// - append 함수로 추가시 name이 중복 가능
// - 따라서 주어진 name 의 해당 하는 필드의 모든 value를 반환
 
formData.has(name)
// - 주어진 name 의 해당하는 필드가 있을 경우 true, 없으면 false를 반환
 
formData.set(name, value)
formData.set(name, blob, fileName)
// - set 함수는 append 함수 처럼 필드를 추가
// - append와 비슷한 set 메소드는 set도 추가를 해주기는 하지만, 기존 key가 있으면 그 key값을 모두 덮어씌워버린다

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-FormData-%EC%A0%95%EB%A6%AC-fetch-api

[JS] 📚 FormData 사용법 & 응용 총정리 (+ fetch 전송하기)

이분글을 참조하여 정리하였습니다.