[javascript] 자바스크립트로 파일 업로드 및 다운로드 프로그레스 바 만들기

14 Dec 2023

javascript

파일을 업로드하거나 다운로드할 때 사용자에게 진행 상황을 시각적으로 표시하는 것은 좋은 사용자 경험을 제공합니다. 이번에는 자바스크립트를 사용하여 파일 업로드 및 다운로드의 프로그레스 바를 만드는 방법에 대해 알아보겠습니다.

파일 업로드 프로그레스 바

1. HTML 작성

먼저 파일을 업로드할 수 있는 HTML 폼을 작성합니다.

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <button type="submit">Upload</button>
</form>
<div id="uploadProgress">
  <div id="progressBar"></div>
  <div id="percent">0%</div>
</div>

2. JavaScript 작성

다음으로, 자바스크립트를 사용하여 파일 업로드 프로그레스를 실시간으로 업데이트합니다.

document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault();
  let formData = new FormData(this);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  }).then(response => {
    // handle upload success
  }).catch(error => {
    // handle upload error
  });
  
  let progressBar = document.getElementById('progressBar');
  let percent = document.getElementById('percent');
  
  // 파일 업로드 중인 진행 상황을 실시간으로 업데이트
  let updateProgress = setInterval(function() {
    fetch('/progress', {
      method: 'GET'
    }).then(response => response.json())
    .then(data => {
      progressBar.style.width = data.percent + '%';
      percent.innerText = data.percent + '%';
      if (data.percent === 100) {
        clearInterval(updateProgress); // 진행 상황 업데이트 중지
      }
    });
  }, 1000);
});

파일 다운로드 프로그레스 바

파일 다운로드의 경우, HTML과 자바스크립트를 사용하여 프로그레스 바를 만들 수 있습니다.

1. HTML 작성

파일을 다운로드하는 버튼을 HTML에 추가합니다.

<a href="/download/file" download>
  <button>Download</button>
</a>
<div id="downloadProgress">
  <div id="progressBar"></div>
  <div id="percent">0%</div>
</div>

2. JavaScript 작성

파일 다운로드 프로그레스를 표시하기 위해 자바스크립트를 추가합니다.

document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault();
  let progressBar = document.getElementById('progressBar');
  let percent = document.getElementById('percent');
  
  let downloadProgress = setInterval(function() {
    fetch('/download/progress', {
      method: 'GET'
    }).then(response => response.json())
    .then(data => {
      progressBar.style.width = data.percent + '%';
      percent.innerText = data.percent + '%';
      if (data.percent === 100) {
        clearInterval(downloadProgress); // 진행 상황 업데이트 중지
      }
    });
  }, 1000);
});

위의 코드를 통해 파일 업로드 및 다운로드 프로그레스 바를 구현할 수 있습니다. 사용자는 파일 전송의 진행 상황을 실시간으로 확인할 수 있어 편리하게 사용할 수 있습니다.