您的位置：首页 > 技术中心 > 前端框架 >

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

时间：2023-04-24 18:08

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

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

一、HTML5 的 File API

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

File 对象

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

例如：

<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>

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 实现文件上传。

基础文件上传

基础文件上传的实现如下：

<!-- 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 方法来异步地将表单数据发送到后端进行处理。在发送时，我们需要设置 processData 和 contentType 为 false，以确保 FormData 对象能够正确地发送给服务器，而不会被样式化。

显示上传进度

要显示文件上传的进度，我们需要做如下更改：

$('#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>  $('#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）实现文件上传和下载的过程。在实现过程中，需要注意各种情况下的兼容性问题，例如浏览器兼容性，以及表单提交数据的处理和显示进度的方式等。通过了解这些内容，我们可以更好地处理文件上传和下载的需求。

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