파일을 업로드하는 웹 애플리케이션을 개발하고 있다면, 파일 업로드가 완료된 후에 사용자에게 결과를 보여주는 것이 중요합니다. 이 글에서는 HTML과 자바스크립트를 사용하여 파일 업로드를 구현한 후, 업로드 결과를 효과적으로 표시하는 방법에 대해 알아보겠습니다.

파일 업로드를 위한 HTML

가장 먼저, 파일을 업로드할 수 있는 HTML form을 생성해야 합니다.

<form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="submit" value="Upload" />
</form>
<div id="uploadResult"></div>

위의 코드에서는 input type="file"을 사용하여 파일을 선택하고, input type="submit"을 사용하여 파일을 서버로 업로드합니다. 그리고 결과를 표시할 uploadResult라는 ID를 가진 <div>도 함께 생성했습니다.

자바스크립트로 파일 업로드 처리

이제 파일을 업로드하는 자바스크립트 코드를 작성해보겠습니다.

document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault();
  var formData = new FormData(this);
  
  fetch('/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById('uploadResult').textContent = '업로드 완료: ' + data.fileName;
  })
  .catch(error => {
    document.getElementById('uploadResult').textContent = '업로드 실패: ' + error.message;
  });
});

위의 코드는 submit 이벤트가 발생했을 때, FormData를 사용하여 파일을 포함한 데이터를 가져온 후 fetch를 통해 서버로 데이터를 전송합니다. 이후 서버로부터의 응답을 받아 결과를 효과적으로 <div>에 표시하도록 처리하였습니다.

요약

위의 예제를 통해 파일 업로드를 처리하고, 업로드 결과를 자바스크립트로 효과적으로 표시하는 방법에 대해 알아보았습니다. 파일 업로드 후 결과를 표시함으로써 사용자에게 즉각적인 피드백을 제공할 수 있어 더 나은 사용자 경험을 제공할 수 있습니다.

기타 자세한 내용은 MDN Web Docs를 참고하시기 바랍니다.