[javascript] 자바스크립트로 파일 업로드 및 다운로드 기능 모두 구현하기

14 Dec 2023

javascript

이 포스트에서는 HTML과 자바스크립트를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법에 대해 알아보겠습니다.

파일 업로드 구현

먼저, HTML에 파일 업로드를 위한 <input> 요소를 추가합니다.

<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload</button>

다음으로, 자바스크립트 함수를 작성하여 파일 업로드를 처리합니다.

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

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

  // 파일을 서버로 전송하는 AJAX 요청
  // 예: fetch 또는 XMLHttpRequest를 사용
}

위 코드에서는 사용자가 선택한 파일을 FormData에 추가하고, 이를 서버로 전송하는 AJAX 요청을 보낼 수 있습니다.

파일 다운로드 구현

파일을 다운로드하는 것은 더 간단합니다. 다음은 클라이언트 측 자바스크립트로 파일을 다운로드하는 예제입니다.

function downloadFile() {
  // 파일 다운로드를 위한 URL
  const fileUrl = '/path/to/file';

  // 가상 링크를 생성하고 클릭하여 다운로드
  const link = document.createElement('a');
  link.href = fileUrl;
  link.setAttribute('download', 'file.pdf');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

이 예제에서는 사용자가 링크를 클릭했을 때, 자바스크립트를 사용하여 파일을 다운로드하도록 구현되어 있습니다. 클라이언트 측에서는 사용자가 다운로드 링크를 클릭하는 경우, 해당 파일을 다운로드할 수 있도록 구성할 수 있습니다.

두 가지 기능을 조합하여 파일 업로드 및 다운로드를 자바스크립트를 사용하여 구현할 수 있습니다.

이렇게 설계된 파일 업로드 및 다운로드 기능은 웹 애플리케이션에서 파일 관련 작업을 효과적으로 처리할 수 있는 강력한 도구가 될 것입니다.