[javascript] 자바스크립트로 파일 업로드 진행상황 표시하기

14 Dec 2023

javascript

파일 업로드는 웹 애플리케이션에서 흔히 사용되는 기능입니다. 사용자에게 파일 업로드 진행 상황을 시각적으로 표시해주면 좋은 사용자 경험을 제공할 수 있습니다. 이 글에서는 자바스크립트를 사용하여 파일 업로드 중에 진행 상황을 실시간으로 표시하는 방법을 살펴보겠습니다.

HTML

<input type="file" id="fileInput">
<button onclick="uploadFile()">업로드</button>
<progress value="0" max="100" id="uploadProgress"></progress>

자바스크립트

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];

  var formData = new FormData();
  formData.append('file', file);

  var xhr = new XMLHttpRequest();

  xhr.upload.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      var progress = document.getElementById('uploadProgress');
      progress.value = percentComplete;
    }
  };

  xhr.open('POST', 'upload.php', true);
  xhr.send(formData);
}

위 코드에서, uploadFile 함수는 파일을 업로드하는 역할을 합니다. XMLHttpRequest를 사용하여 파일을 서버로 보내고, xhr.upload.onprogress 이벤트를 사용하여 업로드 진행 상황을 감지합니다. 진행 상황에 따라 progress 엘리먼트의 값이 업데이트되어 실시간으로 업로드 진행 상황을 표시합니다.

이 예시를 통해 자바스크립트를 사용하여 파일 업로드 중의 진행 상황을 표시하는 방법을 알아보았습니다.

참고문헌: