在现代 web 开发中，文件上传和下载是经常遇到的需求。javascript 作为前端开发的语言之一，提供了许多强大的工具库和 api 来管理文件上传和下载的过程。
本文将探讨如何使用 JavaScript 实现文件上传和下载的功能，首先介绍基于 HTML5 的 File API，然后使用 jQuery 和 XMLHttpRequest 发送 AJAX 请求来实现文件上传和下载。
一、HTML5 的 File API
HTML5 的 File API 可以让 JavaScript 读取和操作本地文件，包括上传和下载。这个 API 包含了 File 和 FileReader 两个对象来解决这些问题。
- File 对象
File 对象代表了通过类似输入字段上传的本地文件，这个对象有一系列属性来描述这个文件，例如文件名、大小、类型等。还有一些方法可以用来读取这个文件的内容。
立即学习“Java免费学习笔记（深入）”；
例如：
<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 实现文件上传。
- 基础文件上传
基础文件上传的实现如下：
部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/
<!-- 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）实现文件上传和下载的过程。在实现过程中，需要注意各种情况下的兼容性问题，例如浏览器兼容性，以及表单提交数据的处理和显示进度的方式等。通过了解这些内容，我们可以更好地处理文件上传和下载的需求。
