[Javascript] JavaScript) input type="file" UI 커스텀 및 파일명 출력하는법(Multiple)

1. JSP

 

=> input file 선언 및 label로 input file 연동

<label for="file">
  	<div class="btn-upload">파일 업로드하기</div>
</label>
	<input type="file" name="file" data-ax-path="file" id="file" class="form-control" width="80%">
	<p id="originName" style="display : inline-block"></p>

 

 

2. CSS

 

=> input file을 깔끔하게 커스텀하기위한 CSS 소스

 <style>
.btn-upload {
  width: 130px;
  height: 27px;
  background: #fff;
  border: 1px solid rgb(77,77,77);
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    background: rgb(77,77,77);
    color: #fff;
  }
}

#file {
  display: none;
}
</style>

 

 

3.JS

 

window.onload=function(){
	target=document.getElementById('file');
	target.addEventListener('change',function(){
	
	
		if(target.value.length){ // 파일 첨부인 상태일경우 파일명 출력
			var fileList = "";
	        for(i = 0; i < target.files.length; i++){
	            fileList += target.files[i].name + '<br>';
	        }
	        target2 = document.getElementById('originName');
	        target2.innerHTML = fileList;
		}else{ //버튼 클릭후 취소(파일 첨부 없을 경우)할때 파일명값 안보이게
			$('#originName').html("");
		}
		
	});
}

 

 

결과 화면

 

 

 

해당 소스 복사붙여넣기하시면 완성됩니다.