formData로 다중업로드
오늘 아침부터 진짜 한 6시간 정도 이것만 했따;
다중 파일 업로드 ajax로 넘기는 방법임 울고싶다..광강....
HTML
<div class="jts_file_upload" id="divfiles">
<a href="#" onclick="fileAppend();">파일추가</a><br/>
</div>
<div id="filebind<c:out value="${SCT006}" />"></div>html은 최대한 간단하게, onclick()으로 연결했다.
버튼 클릭 시 파일 태그를 추가하는 메소드만 작동하도록 만들어 놓았다.
JavaScript 1) 파일추가
fileAppend = function(){
let cc = $("#divfiles");
let aa = $(cc).find("input[type=file]");
let len = aa.length + 1;
let fileplus = '';
fileplus = `<input type="file" id="file\${len}" class="filess"><br/>`;
$('#divfiles').append(fileplus);
}[파일추가]라는 버튼을 클릭했을 때,
1) <div> 태그를 찾는다.
2) <div> 태그 안에 <input type='file'>이라는 태그를 찾는다. (처음엔 0개)
3) len 이란 변수에 <input type='file'> 태그가 몇개인지 찾고, +1을 해준다.
4) fileplus 라는 변수를 선언하고, input type='file'을 추가하는 템플릿리터럴을 넣어준다.
5) <div> 태그 안에 fileplus를 넣는다! ==> 버튼 클릭 할 때마다 input type='file' 태그가 추가 된다.
위에건 그냥 그런거고..!
아무튼 이렇게 추가된 파일 태그에 넣은 파일들을 다중으로 업로드 하고 싶었다!
그래서 저장버튼을 클릭했을때, 돌아가는 메소드를 하나 만들었는데...
문제는 아무리 여러 파일들을 올려도, 제일 처음에 올라가는 파일만 저장된다는 것이 문제였따!
JavaScript 2) ajax로 다중 업로드 파일 보내기
reg2 = function(){
var form = new FormData();
let panret = $("#divfiles");
let inputFile = $(panret).find("input[type=file]");
//ha... 드디어 성공...
for(var i=0; i<inputFile.length; i++){
for(var j=0; j<inputFile[i].files.length; j++){
form.append('uploadFiles[' + i + ']', inputFile[i].files[j]);
}
}
for (let key of form.keys()) {
console.log(key, ":::", form.get(key));
}
for (let value of form.values()) {
console.log(value);
}
$.ajax({
type : "POST",
url : url,
data : form,
contentType: false, //기본 타입으로는 파일 전송이 안되기 때문에 false 로 설정
processData: false, //ajax통신에서 data 파라미터로 전달된 데이터를 query string 형태로 만드는데, 파일 전송의 경우 필요없음
success : function(rslt) {
alert('성공!');
console.log(rslt);
},
error : function(request, status, error) {
console.log("ghkdk");
},
});
}ㅇㅣ렇게 해서.. 드디어 파일 전송 완료
처음에는 파일을 받아오는 java부분이 문제가 있나 싶었는데, 백단에서는 여러개의 파일들을 던진다는 것으로 계산해서 List로 받았고, 받은 List들을 하나씩 반복문으로 빼서 VO 에 넣어주는 작업을 해주고 있었다!
분명 잘 던지는 줄 알아서 계속 백단만 보다가
스크립트 문제인가!?!? 하고 formData를 좀 더 연구해보았따.
그리고 내가 넣은 formData를 하나하나씩 빼서 확인해보려고 할 때, 그냥 console.log로 찍으면 안되고 반복문으로 돌려줘서 formData의 키와 값을 빼야 한다는 사실도 알아냈따.
for (let key of form.keys()) {
console.log(key, ":::", form.get(key));
}
for (let value of form.values()) {
console.log(value);
}그래서 이렇게 하나하나씩 빼가면서 확인해보니 애초에 formData에 들어가는 애들이 문제였던 것이었다!
그래서 formData에 append해주는 부분이 문제인가보다 하고 그부분만 계속해서 수정에 수정에 수정에 수정에 X 128412번을 했다.
흑흑.. 수많은....시행착오...
그래서 결론은
for(var i=0; i<inputFile.length; i++){
for(var j=0; j<inputFile[i].files.length; j++){
form.append('uploadFiles[' + i + ']', inputFile[i].files[j]);
}
}이렇게 만들어주면 되는 것이었다.
아니 분명히 사람들이 append할 때, key값 동일해도 된다고 했던거 같은데 (내가 잘못본걸수도..ㅎ) 흠.. 아무튼 이부분은 계속 더 봐야할 것 같다.
문제는 formData에 append할 때, name값이 동일해서 여러 파일들이 올라가지 않았던 것 같다.
그래서 결국은 반복문에 넣어주는 파일 하나 당 고유한 name값을 주어서 해결하였다!
앞으로는.. 오류 찾는 것도 그렇고.. 시간이 좀 더 짧아지는 날이 오겠지!?!?
ㅠ_ㅠ 그래도 고생했따 나녀석