使用JavaScript操作文件上传需要用到元素,通过监听其change事件获取文件信息,再使用XMLHttpRequest对象发送文件到服务器。
示例代码:
// 获取input元素
const input = document.querySelector('input[type="file"]');
// 监听change事件
input.addEventListener('change', () => {
// 获取上传的文件
const file = input.files[0];
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 监听XMLHttpRequest对象的readystatechange事件
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
// 发送文件到服务器
xhr.open('POST', '/upload');
xhr.send(file);
});
使用JavaScript操作文件下载需要用到XMLHttpRequest对象,通过设置responseType为blob获取文件二进制数据,再创建URL.createObjectURL()生成文件下载链接。
示例代码:
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 设置responseType为blob
xhr.responseType = 'blob';
// 监听XMLHttpRequest对象的readystatechange事件
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
// 生成文件下载链接
const url = URL.createObjectURL(xhr.response);
// 创建a元素并设置下载链接
const link = document.createElement('a');
link.href = url;
link.download = 'file.txt';
// 模拟点击a元素下载文件
link.click();
// 释放URL对象
URL.revokeObjectURL(url);
}
};
// 发送请求获取文件数据
xhr.open('GET', '/download');
xhr.send();
其中,/upload和/download是服务器端的接口地址,需要根据实际情况进行修改。