[javascript] JAX 호출을 사용한 웹페이지의 파일 업로드 및 다운로드
웹 페이지에서 파일 업로드 및 다운로드 기능은 많은 웹 애플리케이션에서 필수적인 부분입니다. JAX(JavaScript + Ajax) 호출을 사용하여 파일 업로드 및 다운로드를 구현하는 방법을 확인해 보겠습니다.
파일 업로드
웹 페이지에서 파일을 업로드하기 위해서는 HTML 폼과 JavaScript를 사용하여 파일을 서버로 전송해야 합니다. 아래는 간단한 파일 업로드 예제 코드입니다.
<form id="fileUploadForm" action="/upload" method="post" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<input type="button" value="Upload" onclick="uploadFile()">
</form>
<script>
function uploadFile() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formData);
}
</script>
위 코드는 파일을 선택하고 “Upload” 버튼을 클릭하면 uploadFile 함수가 호출되어 XMLHttpRequest를 사용하여 파일을 서버로 업로드합니다.
파일 다운로드
서버에서 파일을 다운로드하기 위해서는 클라이언트 측 JavaScript를 사용하여 서버에 파일을 요청하고 응답을 받아야 합니다. 아래는 파일 다운로드 예제 코드입니다.
<button onclick="downloadFile()">Download</button>
<script>
function downloadFile() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/download/sample.pdf', true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
var blob = xhr.response;
var url = window.URL.createObjectURL(blob);
var a = document.createElement('a');
a.href = url;
a.download = 'sample.pdf';
a.click();
window.URL.revokeObjectURL(url);
}
};
xhr.send();
}
</script>
위 코드는 “Download” 버튼을 클릭하면 downloadFile 함수가 호출되어 XMLHttpRequest를 사용하여 파일을 서버에서 다운로드하고, 받은 파일을 클라이언트로 다운로드하게 됩니다.
JAX 호출을 사용하여 웹 페이지에서 파일 업로드 및 다운로드를 구현하는 것은 간단하지만 매우 유용한 방법입니다.