자바스크립트에서 파일 업로드, 다운로드 기능을 구현하는 방법

현대 웹 개발에서는 파일 업로드 및 다운로드가 자주 발생하는 요구 사항입니다. 프런트엔드 개발 언어 중 하나인 JavaScript는 파일 업로드 및 다운로드 프로세스를 관리하기 위한 많은 강력한 도구 라이브러리와 API를 제공합니다.

이 글에서는 JavaScript를 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법을 살펴보겠습니다. 먼저 HTML5 기반의 File API를 소개한 다음 jQuery 및 XMLHttpRequest를 사용하여 AJAX 요청을 보내 파일 업로드 및 다운로드를 구현합니다.

1. HTML5의 파일 API

HTML5의 파일 API를 사용하면 JavaScript가 업로드 및 다운로드를 포함하여 로컬 파일을 읽고 작동할 수 있습니다. 이 API에는 이러한 문제를 해결하기 위해 File과 FileReader라는 두 개의 개체가 포함되어 있습니다.

1. 파일 개체

파일 개체는 유사한 입력 필드를 통해 업로드된 로컬 파일을 나타냅니다. 이 개체에는 파일 이름, 크기, 유형 등과 같은 파일을 설명하는 일련의 속성이 있습니다. 이 파일의 내용을 읽는 데 사용할 수 있는 방법도 있습니다.

예:

<input type="file" id="fileInput" />

<script>
const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
console.log(file.name)         // 文件名
console.log(file.size)         // 文件大小
console.log(file.type)         // MIME 类型
</script>

2. FileReader 개체

FileReader 개체는 파일을 읽고 추가 처리를 위해 파일 내용을 메모리에 저장하는 데 사용할 수 있습니다. 읽기 프로세스를 추적하는 데 사용되는 세 가지 이벤트는 onloadstart, onprogress 및 onload입니다. 예:

const fileInput = document.getElementById('fileInput')
const file = fileInput.files[0]
const reader = new FileReader()

reader.onload = function() {
    console.log(reader.result)  // 读取完成后的文件内容
}

reader.readAsText(file)         // 按文本格式读取文件

2. jQuery 파일 업로드

jQuery는 AJAX 요청을 포함하여 수많은 강력한 API를 제공하는 매우 강력한 JavaScript 라이브러리로, JavaScript를 사용하여 파일 업로드를 구현할 수 있습니다.

1. 기본 파일 업로드

기본 파일 업로드 구현은 다음과 같습니다.

<!-- HTML 代码 -->
<form enctype="multipart/form-data" id="form">
  <input type="file" name="file" />
  <button type="button" id="upload">上传</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // JavaScript 代码
  $('#upload').click(() => {
    const formData = new FormData($('#form')[0])
    $.ajax({
      url: '/upload',
      type: 'POST',
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

위 코드에서는 먼저 파일 업로드 입력 상자와 업로드 버튼이 포함된 HTML 양식을 정의합니다. 그런 다음 jQuery의 ajax 메서드를 사용하여 처리를 위해 양식 데이터를 백엔드로 비동기적으로 보냅니다. 전송할 때 FormData 객체가 스타일 지정 없이 서버에 올바르게 전송될 수 있도록 processData 및 contentType을 false로 설정해야 합니다.

2. 업로드 진행률 표시

파일 업로드 진행률을 표시하려면 다음과 같이 변경해야 합니다.

$('#upload').click(() => {
  const formData = new FormData($('#form')[0])
  $.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    processData: false,
    contentType: false,
    data: formData,
    xhr: function () {
      const xhr = new window.XMLHttpRequest()
      xhr.upload.addEventListener('progress', function (e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100)
          console.log(percent + '%')
        }
      }, false)
      return xhr
    },
    success: function (res) {
      console.log(res)
    },
    error: function (err) {
      console.log(err)
    },
  })
})

위 코드에서 xhr 함수를 ajax 메서드에 전달하고 이 함수는 XMLHttpRequest 개체를 반환합니다. . 그런 다음 addEventListener 메소드를 사용하여 진행 이벤트 리스너를 추가하고 업로드 진행률을 계산하여 콘솔에 인쇄합니다.

3. XMLHttpRequest 파일 다운로드

XMLHttpRequest는 클라이언트를 생성하는 데 사용할 수 있는 JavaScript 개체입니다. AJAX 요청을 통해 서버 데이터를 얻을 수 있으며 파일 다운로드에도 사용할 수 있습니다.

다음은 XMLHttpRequest를 통해 파일을 다운로드하는 예입니다.

<a href="#" id="download">下载文件</a>
<script>
  $('#download').click(() => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', '/download', true)
    xhr.responseType = 'blob'
    xhr.onload = function (e) {
      if (this.status === 200) {
        const blob = new Blob([this.response], { type: 'application/octet-stream' })
        const link = document.createElement('a')
        link.href = window.URL.createObjectURL(blob)
        link.download = 'file.zip'
        link.click()
      }
    }
    xhr.send()
  })
</script>

위 코드에서는 새로운 XMLHttpRequest 객체를 생성하고 open 메소드를 호출하여 GET 요청을 엽니다. responseType 속성을 사용하여 예상되는 응답 유형이 바이너리 데이터임을 서버에 알리고, 요청이 완료되면 onload 이벤트를 사용하여 응답을 처리하고 응답의 바이너리 데이터를 Blob 객체로 변환하고 다운로드할 링크를 생성합니다. 파일.

요약

이 글에서는 주로 JavaScript(File API, jQuery, XMLHttpRequest 포함)를 사용하여 파일 업로드 및 다운로드 프로세스를 구현하는 방법을 소개합니다. 구현 과정에서는 브라우저 호환성, 양식 제출 데이터 처리 및 진행 상황 표시 방법 등 다양한 상황에서의 호환성 문제에 주의를 기울여야 합니다. 이를 이해함으로써 파일 업로드 및 다운로드 요구 사항을 더 잘 처리할 수 있습니다.

위 내용은 자바스크립트에서 파일 업로드, 다운로드 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!