[javascript] 자바스크립트로 파일 업로드 및 다운로드 중 파일 타입 변환하기

파일을 웹 애플리케이션에 업로드하고 사용자가 필요한 형식으로 변환하여 다운로드하는 것은 매우 일반적입니다. 자바스크립트를 사용하여 이러한 파일 변환 작업을 수행하는 방법을 살펴보겠습니다.

파일 업로드

사용자가 파일을 업로드하도록 허용하려면 HTML <input type="file"> 요소를 사용하여 파일 선택 창을 표시합니다.

<input type="file" id="fileInput">
<button onclick="uploadFile()">업로드</button>

사용자가 파일을 선택하고 “업로드” 버튼을 클릭하면, uploadFile 함수가 호출됩니다. 여기서 파일을 읽고 서버로 업로드할 수 있습니다.

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  // 파일을 서버로 업로드하는 로직
}

파일 다운로드

서버에서 파일을 변환하고 사용자에게 제공할 수 있으면, 다음과 같이 자바스크립트로 해당 파일을 다운로드할 수 있습니다.

function downloadFile(fileName) {
  // 파일 다운로드를 위한 로직
  const downloadLink = document.createElement('a');
  downloadLink.href = '서버로부터의 파일 URL';
  downloadLink.download = fileName;
  downloadLink.click();
}

파일 타입 변환

파일 변환 작업은 보통 서버에서 처리되지만, 자바스크립트에서도 일부 기본적인 변환 작업을 수행할 수 있습니다. 예를 들어, 사용자가 업로드한 CSV 파일을 JSON 형식으로 변환하여 다운로드할 수 있습니다.

function convertCSVtoJSON(csvContent) {
  // CSV를 JSON으로 변환하는 로직
  // 반환된 JSON 데이터를 가지고 파일 다운로드
}

위의 코드에서 csvContent는 사용자가 업로드한 CSV 파일의 내용을 나타냅니다. 이를 JSON으로 변환하여 파일 다운로드를 수행할 수 있습니다.

자바스크립트를 사용하여 파일 업로드, 다운로드 및 변환하는 방법에 대해 간략하게 살펴보았습니다. 이러한 작업을 수행하는 데에는 물론 서버 측 로직과 보안 고려 사항이 더 많이 필요하지만, 이러한 예시는 웹 애플리케이션에서 파일 작업을 다루는 데에 도움이 될 수 있습니다.