文件上传是我们经常会用到的功能,本节中将讲解使用JavaScript实现文件上传的方法。
首先,我们需要编写一个HTML的表单,用于选择文件和提交上传请求。
<form id="upload-form">
<input type="file" name="file-input">
<button type="submit">上传文件</button>
</form>
接着,我们需要编写Javascript代码,用于处理上传请求,并将文件发送到服务器。
const form = document.getElementById('upload-form');
const fileInput = document.querySelector('input[type="file"]');
form.addEventListener('submit', (event) => {
event.preventDefault(); // 防止表单自动提交
const formData = new FormData();
formData.append('file', fileInput.files[0]); // 将文件对象添加到FormData中
fetch('/upload', { // 发送上传请求到服务器的/upload路由
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
console.log('文件上传成功');
} else {
console.error('文件上传失败');
}
})
.catch(error => {
console.error('文件上传失败:', error);
})
})
以上Javascript代码使用了Fetch API,它是一种现代的网络请求API,可以用于发送各种类型的请求。在请求中,我们使用了FormData对象,它是用于包装表单数据并将其发送到服务器的API。我们将选择的文件对象添加到FormData中,然后使用fetch发送上传请求。
下面是一个示例网站,可以上传一个图片文件并且显示上传的图片。你可以参考该示例,并魔改它,实现并尝试文件上传功能。
文件下载指的是将服务器上的文件发送给客户端,让客户端下载该文件。
在HTML代码中,我们需要设置一个链接,用于下载文件。
<a href="/download" download="example.pdf">下载PDF文件</a>
注意:在链接中必须设置download属性,用于指定下载文件的名称。
接着,我们需要编写Javascript代码,用于处理下载请求。
const downloadLink = document.querySelector('a[href="/download"]');
downloadLink.addEventListener('click', (event) => {
event.preventDefault(); // 防止链接默认行为
fetch('/download', { // 发送下载请求到服务器的/download路由
method: 'GET',
})
.then(response => {
if (response.ok) {
return response.blob(); // 将响应数据转化为Blob对象
} else {
console.error('文件下载失败');
}
})
.then(blob => {
const url = URL.createObjectURL(blob); // 将Blob对象生成URL
const a = document.createElement('a'); // 创建一个<a>标签
a.href = url;
a.download = 'example.pdf'; // 设置下载文件的名字
a.click(); // 模拟<a>标签的click事件
})
.catch(error => {
console.error('文件下载失败:', error);
})
})
以上Javascript代码使用了Fetch API,我们先发送一个GET请求到/download路由,并将响应数据转化为Blob对象。接着生成Blob对象的URL,并使用createElement
方法创建一个<a>
标签,设置它的href属性和download属性,然后调用click
方法模拟用户点击该链接。
下面是一个示例网站,可以下载一个PDF文件。你可以参考该示例,并魔改它,实现并尝试文件下载功能。
本文链接:http://task.lmcjl.com/news/10673.html