자바스크립트 Input type File 파일명, 확장자만 나오게 커스텀

자바스크립트 (JavaScript)

 

 

자바스크립트 Input type File  파일명, 확장자만 나오게 커스텀한 코드 예제입니다.

파일 업로드를 누르면 파일을 첨부하는 창이 뜨고 파일을 선택하고 업로드시 파일명과 확장자까지만 표시되도록 작업한 코드입니다.

 

일반적인 input type="file"은 현재 파일의 경로까지 쭉 보여지는데 때에 따라서 파일명과 확장자만 표시되도록 하고 싶을때 사용하면 될 것 같습니다. :)

 

 

▶HTML

<div class="filebox">
  <input class="upload-name" type="text" readonly>
  <input type="file" id="file_01" class="file" title="파일 업로드">
  <label for="file_01" class="upload-button">파일업로드</label> 
</div>

 

▶CSS

input {
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
}
 
.filebox {
  display: flex;
  gap: 10px;
}
 
.filebox input {
  border: 1px solid #dbdbdb;
  background-color: #fff;
  font-size: 16px;
}
 
.filebox .upload-name {
  max-width: 500px;
  width: 100%;
  height: 36px;
  padding: 4.5px 15px;
  pointer-events: none;
}
 
.filebox .file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}
 
.filebox .file:focus+label {
  background-color: #000;
  color: #fff;
}
 
.filebox .upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 4.5px 15px;
  border: 1px solid #000;
  color: #000;
  cursor: pointer;
  line-height: 1;
  transition: all 0.3s;
}
 
.filebox .upload-button:hover,
.filebox .upload-button:focus {
  background-color: #000;
  color: #fff;
}

 

▶Javascript

// Input File 파일명, 확장자만 나오게 커스텀
let fileInput = document.querySelector('.filebox .file');
let nameInput = document.querySelector('.filebox .upload-name');
fileInput.addEventListener('change', function(e){
  const input = e.target.closest('.file');
  if (!input) return;
  let fileName = input.value.split('/').pop().split('\\').pop();
  nameInput.value = fileName;
});
 
// 제이쿼리를 이용해서 작업시 코드
// $(".filebox .file").on('change',function(){
//   var fileName = $(this).val().split('/').pop().split('\\').pop();
//   $(".upload-name").val(fileName);
// });