JavaScript基础之文件上传与下载的实现详解
yuzhihui 人气:0一、文件上传
1、普通文件上传
JavaScript 可以使用表单提交来实现文件上传。首先,在 HTML 中创建一个文件输入框:
<input type="file" id="fileInput">
然后,在 JavaScript 中获取文件输入框的引用,并在其上设置事件监听器,如下所示:
var fileInput = document.getElementById('fileInput'); fileInput.addEventListener('change', function () { // 在这里处理选择的文件 });
在事件监听器中,可以使用 fileInput.files[0]
属性获取选择的文件,然后对文件进行处理。
接下来可以使用 XMLHttpRequest
或 fetch
API 来上传文件。
使用 XMLHttpRequest
:
var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', 'url', true); xhr.onload = function () { if (xhr.status === 200) { console.log('upload success'); } }; xhr.send(formData);
使用 fetch
:
var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); fetch('url', { method: 'POST', body: formData }).then(response => { if (response.ok) { console.log('upload success'); } });
另外还可以使用第三方库如 axios
来实现文件上传,具体实现方法可以参考相关文档。
2、大文件上传
在上传大文件时,通常采用分块上传的方式。将大文件分成若干个块,每块一个 HTTP 请求上传。
实现大文件上传的步骤如下:
- 用户选择文件。
- 将文件分成若干块。
- 对于每一块,向服务器发送 HTTP 请求上传。
- 服务器接收到文件块后,将其存储在服务器上。
- 在所有块上传完成后,服务器将所有块合并成一个完整的文件。
JavaScript 可以使用 File API(File 和 Blob 对象)来实现文件的读取和上传。
下面是一个使用 JavaScript 实现大文件上传的简单实例,使用分块上传的方法。
<input type="file" id="file-input">
// 上传文件块 function uploadChunk(file, start, end, chunk) { var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.setRequestHeader('Content-Type', 'application/octet-stream'); xhr.setRequestHeader('Content-Range', 'bytes ' + start + '-' + end + '/' + file.size); xhr.send(chunk); } // 上传文件 function uploadFile(file) { var chunkSize = 1 * 1024 * 1024; // 分块大小为1MB var chunks = Math.ceil(file.size / chunkSize); // 计算分块数 var currentChunk = 0; // 当前分块 var start, end; while (currentChunk < chunks) { start = currentChunk * chunkSize; end = start + chunkSize >= file.size ? file.size : start + chunkSize; var chunk = file.slice(start, end); uploadChunk(file, start, end, chunk); currentChunk++; } } // 监听文件选择事件 document.getElementById('file-input').addEventListener('change', function(e) { var file = e.target.files[0]; if (file) { uploadFile(file); } });
在这个实例中,我们使用了 XMLHttpRequest 对象上传文件,并设置了 Content-Type 和 Content-Range 消息头。Content-Type 消息头表示上传的数据类型是二进制数据,Content-Range 消息头表示上传的文件块的范围。
在这个示例中,我们将文件分成若干块,每块大小为 1MB。我们使用 File API 中的 slice 方法截取文件块,并使用 XMLHttpRequest 将文件块上传到服务器。
注意,这只是一个简单的实例,代码仅供参考,在实际应用中还需要考在考虑以下几点:
- 如果服务器端支持断点续传,可以在服务器端记录已经上传的文件块,避免重复上传。
- 需要考虑如何处理上传失败的文件块,是否需要重试。
- 在上传过程中需要提供进度条,让用户了解上传进度。
- 在上传完成后需要有反馈,告知用户上传是否成功。
- 服务器端如何处理上传的文件块,将其合并成一个完整的文件。
- 服务器端存储空间的问题。可以使用分布式文件系统(如 HDFS)或云存储(如 Amazon S3)来存储上传的文件。
- 文件块上传顺序、文件块校验、断点续传等问题。
通过分块上传的方式,我们可以将大文件分成若干块上传,避免一次性上传大文件造成的超时或者内存不足的问题,同时也方便实现断点续传和上传进度的显示。
除了上面提到的方法外,还可以使用第三方库来实现大文件上传。常见的第三方库有:
- resumable.js
- plupload
- fine-uploader
- tus-js-client
这些库都提供了文件分块、断点续传、上传进度等功能,可以让你更快捷地实现大文件上传。
不过要注意的是,使用第三方库可能会增加代码的复杂性和对第三方库的依赖。在选择使用第三方库时需要权衡其优缺点,并确保它满足你的需求。
关于文件上传需要了解的知识点:
- HTML5 文件上传
- 文件上传技术
- 文件上传安全性
- 分块上传
- 断点续传
- 云存储
二、文件下载
在 JavaScript 中实现文件下载,常见的方法如下:
1、使用 window.location 实现:通过更改当前页面的 URL 为文件下载地址,从而实现下载。
window.location = 'file-download-url';
2、使用 a 标签实现:通过创建一个 a 标签并设置其 href 和 download 属性,从而实现下载。
var link = document.createElement("a"); link.download = "filename"; link.href = "file-download-url"; link.click();
3、使用 fetch API 实现:通过使用 fetch API 获取文件内容,并将其写入 Blob 对象,最后利用 URL.createObjectURL 将其下载。
fetch('file-download-url') .then(response => response.blob()) .then(blob => { const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'filename'; link.click(); URL.revokeObjectURL(url); document.body.removeChild(link); });
加载全部内容