JavaScript 기능을 사용하여 파일 업로드 및 다운로드

JavaScript 기능을 사용하여 파일 업로드 및 다운로드 구현

인터넷의 발전과 대중화로 인해 파일 업로드 및 다운로드는 웹 애플리케이션의 일반적인 기능 중 하나가 되었습니다. 이 글에서는 JavaScript 함수를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 파일 업로드

파일 업로드란 웹 페이지를 통해 로컬 파일을 서버에 업로드하는 것을 말합니다. 파일 선택 및 업로드를 처리하기 위해 HTML5에 파일 API가 제공됩니다. File API의 FileReader 개체를 사용하여 파일 내용을 읽고 XMLHttpRequest 개체를 통해 파일을 서버로 보낼 수 있습니다.

다음은 파일 업로드를 구현하는 JavaScript 함수 코드 예입니다.

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.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { alert('文件上传成功'); } }; xhr.send(formData); }

위 코드에서는 먼저 파일 선택 상자의 DOM 개체를 얻은 다음 선택한 파일을 제거합니다. 다음으로 FormData 개체를 만들고 선택한 파일을 FormData에 추가합니다. 그런 다음 XMLHttpRequest 객체를 생성하고 open() 메서드를 사용하여 업로드 URL과 요청 메서드를 지정합니다. onreadystatechange 이벤트를 통해 XMLHttpRequest의 상태 변화를 모니터링합니다. 상태가 4이고 상태 코드가 200이면 파일 업로드가 성공한 것입니다. 마지막으로 send() 메서드를 호출하여 FormData를 서버로 보냅니다.

2. 파일 다운로드

파일 다운로드란 서버에서 로컬로 파일을 다운로드하는 것을 말합니다. JavaScript에서는 파일 다운로드 링크가 포함된요소를 생성하고 클릭을 시뮬레이션하여 파일을 다운로드할 수 있습니다.元素，并模拟点击来实现文件下载。

function downloadFile() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/download', true); xhr.responseType = 'blob'; xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var blob = xhr.response; var link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'file.txt'; link.click(); } }; xhr.send(); }

上面的代码中，我们首先创建一个XMLHttpRequest对象，并使用open()方法指定下载的URL和请求方式为GET。设置responseType为'blob'，以便以二进制数据的形式接收文件。通过onreadystatechange事件监听XMLHttpRequest的状态变化，当状态为4且状态码为200时，表示文件下载成功。然后，通过创建一个元素，将响应的blob对象转为URL，并将URL赋值给元素的href属性。将文件名设置为'downloaded.txt'。最后，模拟点击元素来触发文件下载。

综上所述，通过使用JavaScript函数，我们可以方便地实现文件上传和下载的功能。通过File API和XMLHttpRequest对象，我们可以对文件进行读取和发送。通过创建