웹사이트에서 파일 업로드 및 다운로드 기능은 많은 웹 애플리케이션에서 필수적인 기능입니다. 이번 글에서는 자바스크립트를 사용하여 웹사이트에서 파일을 업로드하고 다운로드하는 방법에 대해 알아보겠습니다.
파일 업로드 기능 구현하기
웹사이트에서 파일을 업로드하는 기능을 구현하기 위해서는 HTML <input type="file"> 요소를 사용해야 합니다. 이 요소를 사용하여 파일을 선택하고 서버로 업로드할 수 있습니다.
<form>
<input type="file" id="fileUpload" name="fileUpload">
<button type="submit">업로드</button>
</form>
위 HTML 코드에서 파일을 선택하는 <input type="file"> 요소에는 id 속성과 name 속성이 필요합니다. 이를 통해 자바스크립트로 요소에 접근하고, 서버로 전송할 때 사용할 수 있습니다.
파일을 선택하고 업로드 버튼을 클릭하면, submit 이벤트가 발생합니다. 이 때 자바스크립트를 사용하여 선택한 파일을 서버로 전송하도록 구현할 수 있습니다.
const fileUpload = document.getElementById('fileUpload');
fileUpload.addEventListener('change', (event) => {
const file = event.target.files[0];
// 서버로 파일 전송
// ...
});
위 자바스크립트 코드에서 change 이벤트가 발생하면 선택한 파일 객체를 얻을 수 있습니다. 이를 사용하여 서버로 파일을 전송하면 됩니다. 서버로 파일을 전송하는 방법은 백엔드 기술에 따라 다를 수 있기 때문에 서버 측 코드도 구현해야 합니다.
파일 다운로드 기능 구현하기
웹사이트에서 파일을 다운로드하는 기능을 구현하기 위해서는 자바스크립트로 다운로드 링크를 생성하고 클릭 이벤트를 발생시키는 방법을 사용합니다.
<button id="downloadButton">다운로드</button>
위 HTML 코드에서 다운로드 버튼을 클릭하면 파일이 다운로드되도록 자바스크립트 코드를 구현할 수 있습니다.
const downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', () => {
const fileName = 'example.txt';
const fileUrl = 'https://www.example.com/example.txt';
downloadFile(fileName, fileUrl);
});
function downloadFile(fileName, fileUrl) {
const link = document.createElement('a');
link.href = fileUrl;
link.download = fileName;
link.click();
}
위 자바스크립트 코드에서 click 이벤트가 발생하면, downloadFile 함수가 호출되어 파일을 다운로드할 수 있는 링크를 생성합니다. link.click()을 호출함으로써 파일 다운로드가 실행됩니다. fileName과 fileUrl은 다운로드할 파일의 이름과 URL로 수정해야 합니다.
결론
이렇게 자바스크립트를 사용하여 웹사이트에서 파일 업로드 및 다운로드 기능을 구현할 수 있습니다. 파일 업로드는 <input type="file"> 요소를 사용하여 파일을 선택하고 서버로 전송하는 방식으로 구현하며, 파일 다운로드는 생성한 링크를 클릭하여 파일을 다운로드하는 방식으로 구현합니다. 파일 업로드 및 다운로드 기능은 웹 애플리케이션에서 사용자에게 유용한 기능이므로, 프로젝트에 적용해 보시기 바랍니다.
참고 자료: