이 블로그는 크로뮴, Gecko 환경에서 제일 잘 작동됩니다.
profile

글루미스토어

프론트엔드 개발 블로그입니다. Nextjs 14로 개발되었습니다.

input file 파일 복수 업로드 구현

my Blog!

input file 파일 복수 업로드 구현

조회수1372<b>[운영자]</b>영이


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
		.input {
			display: inline-block;
			background: #f0f0f0;
			padding: 5px 8px;
			border-radius: 5px;
			border: 1px solid black;
		}
		.input input {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			opacity: 0;
		}
	</style>
</head>
<body>
	<label for="input" class="input">
	파일 선택
		<input type="file" id="input" onclick="clearFileInput(this)" onchange="fileUpload(this)" />
	</label>
	
	<!-- 파일 리스트가 추가되는 곳 -->
	<ol class="ol">
			
	</ol>
</body>

<script src="/test.js"></script>
</html>


파일 복수 업로드는 

브라우저에서 기본적으로 제공하는 기능은 아니기 때문에,

커스텀 해서 구현해야 한다.


실제로 필요한건 input 태그 하나이고,

개발 편의성의 위해서 label과 ol 태그를 추가했다.






const ol = document.querySelector('.ol');
let files = [];


// 파일 입력 필드가 클릭될 때마다 이전 선택 값을 초기화
let lastFileInputValue = null;

function clearFileInput(input) {
  lastFileInputValue = input.value;
  input.value = '';
}

// 파일을 업로드 했을 때
function fileUpload(inputFile){	
	if(inputFile.files[0]) {
		const model = {
			name: inputFile.files[0].name,
			file: inputFile.files[0],
			idx: Number(Math.random().toFixed(5)) * 100000 + '-' + Number(Math.random().toFixed(5)) * 100000
		}
		files.push(model);	
	}
	reload();
}

// 파일 삭제
function deleteItem(idx){
	const newFiles = files.filter(e=> e.idx !== idx);
	files = newFiles;
	reload();
}


// 파일을 추가하거나 삭제했을 때 DOM Reload
function reload(){
	let template = ``;
	files.forEach(e=> {
		const li = `<li class="li" data-idx=${e.idx}>${e.name}<button onclick="deleteItem('${e.idx}')">X</button></li>`
		template += li;
	})
	ol.innerHTML = template;
}


input을 클릭할 때마다 input을 초기화 시켜줘야 

동일한 파일을 업로드 했을 때도 문제 없이 업로드가 된다.


(기본 input file 태그는

직전과 동일한 파일을 업로드 하면

onchange를 감지하지 못함)


이외에는 array에 file객체 넣어주고 

DOM에 뿌려주면 됨.







제목.webp

이렇게 잘 구현이 된다.


나머지는 css로 예쁘게 꾸미면 됨.











댓글: 0