input type file.. 여러 건 업로드

[현재 상황]

input type file 일 때 멀티파트 써서.. 파일 여러개 등록 가능함. 폼 서브밋으로 

글 등록시 폼 전체 넘김.

 

[구현하고 싶은 것]

첨부파일 버튼을 눌렀을 때 '폴더1' 에서 몇 개의 파일을 선택해도 등록이 되지만.. (서브밋 전)

'폴더2'의 파일도 추가하려고 첨부파일 버튼을 누르면

이전에 폴더1에서 추가해뒀던 파일은 사라지고

폴더2에서 새로 선택한 파일만 남음..........................................................................

 

그래서.. 첨부파일 버튼을 몇번을 누르던지.. 계속 파일을 누적해두고 싶다.

누적하는 방법 찾아보고

안되면 ajax로 하나씩 등록해버려야 할듯? 

 

 

---

[해결]

1. js에서 배열을 만들고 배열에 file값을 넣는다.(배열1 -> 실제로 저장할 파일)

2. 새로 파일을 등록할 경우 배열2에 file값을 넣는다. (배열1 + 배열2)

3. 또 파일을 추가하면 2번 작업 반복

4. 배열을 file 로 변환시킨다. (DateTransfer사용)

<form name="form" id="form" action="/dataSave" method="POST" enctype="multipart/form-data">
   
	<input type="file" name="input_file" id="input_file" value="파일추가" onchange="fn_fileNameView();" multiple="multiple">
	<div id="file_name"><!-- 파일명 보여주는곳 --></div>
		   
</form>

var arr_file_list = Array.from($("#input_file")[0].files); // 배열 선언

function fn_fileNameView(){ 
	
	const dataTransfer = new DataTransfer();
	var files = $("#input_file")[0].files;
	var add_files = Array.from(files); // 파일을 배열에 넣는다.
	arr_file_list = arr_file_list.concat(add_files); //기존에 배열에 새로운 배열을 합한다.
	arr_file_list.forEach(files => { dataTransfer.items.add(files);}); //배열을 파일로 변환
	
    //[공통-파일명 노출]
	$("#file_name").empty(); // 첨부된 파일명이 보여질 영역 초기화
	$("#input_file")[0].files = dataTransfer.files; //변환된 파일을 input file에 넣는다..
	
	var file_leng = $("#input_file")[0].files.length; //파일의 길이 

	for(let i = 0 ; i < file_leng ; i++){ // 파일의 길이 만큼 돌면서 값 추가
		$("#file_name").append($("#input_file").get(0).files[i].name + "  <a href=\"javascript:fn_delete_fileName('"+$("#input_file").get(0).files[i].name+"','"+i+"')\">삭제</a> <br>");
	}
	
}

function fn_delete_fileName(fileName,Del_index){ //파일명과 , 삭제할 파일의 index를 받는다.
	const dataTransfer = new DataTransfer();
	let files = $("#input_file")[0].files; // 현재 파일의 목록을 받아서
	let fileArray = Array.from(files); //배열에 저장시킨다.
	fileArray.splice(Del_index,1); //삭제한 파일의 index부터 1개의 배열을 잘라낸다.(= 삭제)
	fileArray.forEach(files => { dataTransfer.items.add(files);}); //배열 변환
	
    //[공통-파일명 노출]
	$("#file_name").empty(); //첨부된 파일명이 보여질 영역 초기화 
	$("#input_file")[0].files = dataTransfer.files;//변환된 파일을 input file에 넣는다.
	
	var file_leng = $("#input_file")[0].files.length;//파일의 길이

	for(let i = 0 ; i < file_leng ; i++){//파일의 길이만큼 돌면서 값 추가
		$("#file_name").append($("#input_file").get(0).files[i].name + "  <a href=\"javascript:fn_delete_fileName('"+$("#input_file").get(0).files[i].name+"','"+i+"')\">삭제</a> <br>");
	}
	
}

 

https://stackoverflow.com/questions/4156101/copy-array-items-into-another-array

Copy array items into another array

https://devlifetestcase.tistory.com/11

[Spring / Legacy] multiple input file을 이용한 파일 전체/부분 삭제 구현 (Javascript)