javascript怎么实现文件上传和下载功能

在现代 Web 开发中，文件上传和下载是经常遇到的需求。JavaScript 作为前端开发的语言之一，提供了许多强大的工具库和 API 来管理文件上传和下载的过程。

本文将探讨如何使用 JavaScript 实现文件上传和下载的功能，首先介绍基于 HTML5 的 File API，然后使用 jQuery 和 XMLHttpRequest 发送 AJAX 请求来实现文件上传和下载。

一、HTML5 的 File API

HTML5 的 File API 可以让 JavaScript 读取和操作本地文件，包括上传和下载。这个 API 包含了 File 和 FileReader 两个对象来解决这些问题。

1. File 对象

File 对象代表了通过类似输入字段上传的本地文件，这个对象有一系列属性来描述这个文件，例如文件名、大小、类型等。还有一些方法可以用来读取这个文件的内容。

例如：

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

<script>
const fileInput = document.getElementById(&#39;fileInput&#39;)
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)         // 按文本格式读取文件

二、jQuery 文件上传

jQuery 是一个非常强大的 JavaScript 库，提供了大量功能强大的 API，其中包括 AJAX 请求，使得我们能够使用 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 代码
  $(&#39;#upload&#39;).click(() => {
    const formData = new FormData($(&#39;#form&#39;)[0])
    $.ajax({
      url: &#39;/upload&#39;,
      type: &#39;POST&#39;,
      cache: false,
      processData: false,
      contentType: false,
      data: formData,
      success: function (res) {
        console.log(res)
      },
      error: function (err) {
        console.log(err)
      },
    })
  })
</script>

上述代码中，我们首先定义了一个 HTML 表单，包含一个文件上传输入框和一个上传按钮。然后使用 jQuery 的 ajax 方法来异步地将表单数据发送到后端进行处理。在发送时，我们需要设置 processData 和 contentType 为 false，以确保 FormData 对象能够正确地发送给服务器，而不会被样式化。

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 方法来添加 progress 事件监听器，计算出上传进度的百分比并将其打印到控制台上。

三、XMLHttpRequest 文件下载

XMLHttpRequest 是一种可以用于创建客户端的 JavaScript 对象，它可以通过 AJAX 请求来获取服务器数据，也可以用于文件下载。

下面是一个通过 XMLHttpRequest 实现文件下载的示例：

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

上面的代码中，我们创建了一个新的 XMLHttpRequest 对象，并调用 open 方法打开 GET 请求。我们使用 responseType 属性来告诉服务器，期望的响应类型是二进制数据，然后当请求完成时，我们使用 onload 事件来处理响应，并将响应的二进制数据转换成 Blob 对象，并创建一个链接以下载文件。

总结

本文主要介绍了如何使用 JavaScript（包括 File API、jQuery 和 XMLHttpRequest）实现文件上传和下载的过程。在实现过程中，需要注意各种情况下的兼容性问题，例如浏览器兼容性，以及表单提交数据的处理和显示进度的方式等。通过了解这些内容，我们可以更好地处理文件上传和下载的需求。

以上就是javascript怎么实现文件上传和下载功能的详细内容，更多请关注其它相关文章！