[Javascript][업무]파일 업로드 기능 구현하기

업무를 진행하면서 발생한 문제를 해결한 내용입니다.

Jquery로 작성된 코드에서 문제가 있었습니다. 같은 파일을 연속적으로 업로드가 안 되는 문제였습니다.

 

 

HTML과 Javascript 파일 업로드 방법

파일 업로드할 때, 사용하는 HTML 태그

<input type="file" id="fileUpload" />

 

업로드 이벤트를 실행하는 자바스크립트 - change() 사용

// 🛠 pure javascript
document.querySelector('#fileUpload').change() => {
  var sFormData = new FormData();
  sFile = document.querySelector('#fileUpload')[0].files[0];
  sFormData.append('file', sFile);
  // 로직 작성
}


// 🛠 Jquery
$('#fileUpload').change(() => {
  var sFormData = new FormData();
  sFile = $('#fileUpload')[0].files[0];
  sFormData.append('file', sFile);
  // 로직 작성
})

 

 

🐱‍🚀같은 파일을 올리면, change()이벤트가 발생하지 않는 문제 해결 방법

change() 이벤트를 발생시키려면, 현재 input의 value값이 입력된 value값과 달라야 합니다.  그래서,

input의 상태값이 한 번 입력이 되었다면(파일이 업로드 되었다면), javascript 업로드 로직이 끝난 후에 이 input value를 초기화시켜주면 됩니다.

// 🛠 pure javascript
document.querySelector('#fileUpload').change() => {
  var sFormData = new FormData();
  sFile = document.querySelector('#fileUpload')[0].files[0];
  sFormData.append('file', sFile);
  // 로직 작성
  
  document.querySelector('.fileUpload').value =''; // 👈 input 초기화
}


// 🛠 Jquery
$('#fileUpload').change(() => {
  var sFormData = new FormData();
  sFile = $('#fileUpload')[0].files[0];
  sFormData.append('file', sFile);
  // 로직 작성
  
  $('.fileUpload').value =''; // 👈 input 초기화
})

 

 

이상으로 파일을 업로드하는 방법과 연속적으로 같은 이름의 파일을 업로드하는 방법을 알아보았습니다.