在现代 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）实现文件上传和下载的过程。在实现过程中，需要注意各种情况下的兼容性问题，例如浏览器兼容性，以及表单提交数据的处理和显示进度的方式等。通过了解这些内容，我们可以更好地处理文件上传和下载的需求。
参考文章：http://blog.ncmem.com/wordpress/2023/12/15/javascript%e6%80%8e%e4%b9%88%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%92%8c%e4%b8%8b%e8%bd%bd%e5%8a%9f%e8%83%bd/
欢迎入群一起讨论
