文件上传通过FormData和fetch将文件发送至服务器，下载则利用a标签download属性或Blob对象实现；上传支持进度条与错误处理，下载需处理跨域与安全问题，现代方案还包括拖拽、分块上传和预签名URL。
利用JavaScript实现文件上传和下载，核心思路其实就是前端与后端进行数据交互，文件上传主要是通过
FormData
对象将文件数据打包发送给服务器，而文件下载则更多是利用浏览器自身能力，比如
标签的
download
属性，或者通过
Blob
对象和
URL.createObjectURL
来模拟点击下载。这两种操作都离不开浏览器提供的Web API和一些巧妙的客户端处理。
解决方案
文件上传
文件上传通常需要一个
input
元素来选择文件，然后通过JavaScript将文件数据发送到服务器。这里我们主要依赖
FormData
和
fetch
API。
HTML 结构：
JavaScript 逻辑：
立即学习“Java免费学习笔记（深入）”；
获取文件： 当用户选择文件后，可以通过
input.files
获取到一个
FileList
对象。构建
FormData
：
FormData
是专门用来处理表单数据的接口，它可以很方便地将文件和其他表单字段一起发送。发送请求： 使用
fetch
或
XMLHttpRequest
将
FormData
发送到服务器的指定上传接口。
document.getElementById('uploadButton').addEventListener('click', async () => { const fileInput = document.getElementById('fileInput'); const uploadStatus = document.getElementById('uploadStatus'); const files = fileInput.files; if (files.length === 0) { uploadStatus.textContent = '请选择文件！'; return; } const formData = new FormData(); // 如果允许多文件上传，需要遍历文件列表 for (let i = 0; i < files.length; i++) { formData.append('files', files[i]); // 'files' 是后端接收文件数组的字段名 } // 也可以添加其他表单数据 // formData.append('userId', '123'); uploadStatus.textContent = '正在上传...'; try { const response = await fetch('/api/upload', { // 假设后端上传接口是 /api/upload method: 'POST', body: formData, // 注意：使用FormData时，浏览器会自动设置Content-Type为multipart/form-data，无需手动设置 }); if (!response.ok) { // 如果HTTP状态码不是2xx，抛出错误 const errorData = await response.json(); throw new Error(errorData.message || '上传失败'); } const result = await response.json(); uploadStatus.textContent = `上传成功！服务器响应：${JSON.stringify(result)}`; fileInput.value = ''; // 清空已选择的文件 } catch (error) { console.error('上传过程中发生错误:', error); uploadStatus.textContent = `上传失败: ${error.message}`; }});
这里我用了
fetch
，它相对
XMLHttpRequest
来说语法更现代、更简洁。后端需要一个对应的接口来处理这个
multipart/form-data
类型的请求，并保存文件。
文件下载
文件下载的实现方式取决于文件来源。
直接链接下载： 如果你有一个可以直接访问的文件URL（例如
/files/document.pdf
），最简单的方法就是使用
标签的
download
属性。
download
属性会告诉浏览器以指定的文件名保存文件，而不是尝试在浏览器中打开它。
通过API获取数据后下载（例如后端动态生成文件或Blob数据）：当文件数据不是一个直接的URL，而是通过API请求返回的二进制数据（比如
Blob
或
ArrayBuffer
）时，我们需要一些JavaScript来构造下载。
document.getElementById('downloadButton').addEventListener('click', async () => { const downloadStatus = document.getElementById('downloadStatus'); downloadStatus.textContent = '正在准备下载...'; try { const response = await fetch('/api/download/report', { // 假设后端下载接口是 /api/download/report method: 'GET', // 如果需要认证，可以在这里添加headers // headers: { // 'Authorization': 'Bearer your_token' // } }); if (!response.ok) { throw new Error('下载失败，服务器响应异常'); } // 获取文件名，通常在响应头中 const contentDisposition = response.headers.get('Content-Disposition'); let filename = 'downloaded_file'; // 默认文件名 if (contentDisposition && contentDisposition.indexOf('attachment') !== -1) { const filenameMatch = contentDisposition.match(/filename*?=['"]?(?:UTF-8''|)([^;]+?)[;"]?$/i); if (filenameMatch && filenameMatch[1]) { try { filename = decodeURIComponent(filenameMatch[1]); } catch (e) { filename = filenameMatch[1]; // 解码失败则用原始值 } } } // 获取文件内容为Blob对象 const blob = await response.blob(); // 创建一个URL指向Blob对象 const url = URL.createObjectURL(blob); // 创建一个隐藏的a标签来触发下载 const a = document.createElement('a'); a.href = url; a.download = filename; // 设置下载文件名 document.body.appendChild(a); // 必须添加到DOM中才能触发点击 a.click(); // 模拟点击 document.body.removeChild(a); // 下载完成后移除a标签 URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏 downloadStatus.textContent = '文件已开始下载。'; } catch (error) { console.error('下载过程中发生错误:', error); downloadStatus.textContent = `下载失败: ${error.message}`; }});
这里，后端需要在响应头中设置
Content-Disposition: attachment; filename="your_file_name.ext"
，这样前端才能获取到推荐的文件名。
文件上传时，如何实现进度条显示和错误处理？
文件上传，特别是大文件上传，进度条这东西对用户体验是真加分，谁都不想看着一个没反应的页面干等。至于错误处理，那更是健壮应用不可或缺的一部分。
实现上传进度条，最直接的方式是使用
XMLHttpRequest
的
upload.onprogress
事件。虽然前面我用了
fetch
，它更现代，但在处理上传进度方面，
XMLHttpRequest
目前提供了一个更方便的API。
fetch
虽然也能通过
ReadableStream
实现进度，但那要复杂得多，通常我们不会为了一个进度条去搞那么复杂。
// HTML// // 0%document.getElementById('uploadButton').addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const uploadStatus = document.getElementById('uploadStatus'); const progressBar = document.getElementById('progressBar'); const progressText = document.getElementById('progressText'); const files = fileInput.files; if (files.length === 0) { uploadStatus.textContent = '请选择文件！'; return; } const formData = new FormData(); formData.append('file', files[0]); // 假设只上传一个文件 const xhr = new XMLHttpRequest(); // 监听上传进度 xhr.upload.onprogress = (event) => { if (event.lengthComputable) { const percentComplete = (event.loaded / event.total) * 100; progressBar.value = percentComplete; progressText.textContent = `${Math.round(percentComplete)}%`; uploadStatus.textContent = `正在上传: ${Math.round(percentComplete)}%`; } }; // 监听上传完成或失败 xhr.onload = () => { if (xhr.status >= 200 && xhr.status { uploadStatus.textContent = '上传失败：网络错误或服务器无响应。'; }; // 监听上传取消或中止 xhr.onabort = () => { uploadStatus.textContent = '上传已取消。'; }; xhr.open('POST', '/api/upload', true); // 如果需要添加自定义请求头，例如认证token // xhr.setRequestHeader('Authorization', 'Bearer your_token'); xhr.send(formData); uploadStatus.textContent = '开始上传...'; progressBar.value = 0; progressText.textContent = '0%';});
错误处理方面，除了上面
xhr.onload
和
xhr.onerror
捕获的HTTP层面和网络层面的错误，我们还需要考虑业务逻辑错误。比如，后端可能会因为文件类型不符、文件过大等原因拒绝请求，并返回一个带有错误信息的JSON。前端需要解析这个JSON，并给用户友好的提示。在实际项目中，我通常会有一个统一的错误处理机制，捕获HTTP状态码，然后尝试解析响应体，从中提取具体的错误信息。这种分层处理能让用户清楚地知道是哪里出了问题，是网络断了，还是文件不符合要求。
在下载文件时，如何处理跨域请求和安全性问题？
说到跨域，这真是前端老生常谈的痛点了，下载文件也逃不掉。安全性问题更是重中之重，毕竟没人想下载个文件结果带了病毒或者泄露了敏感信息。
跨域请求（CORS）：如果你要下载的文件位于另一个域名下（比如你的前端在
app.example.com
，文件在
files.example.com
），那么浏览器会遵循同源策略。
直接链接下载（
标签的
href
指向跨域URL）：通常情况下，浏览器允许直接链接到跨域资源并下载，不会触发CORS预检请求，因为这不涉及JavaScript读取响应内容。用户点击后，浏览器会直接导航到那个URL并处理下载。通过JavaScript获取数据后下载（
fetch
或
XMLHttpRequest
）：如果你用
fetch
或
XMLHttpRequest
去请求跨域文件，那么就必须满足CORS要求。这意味着服务器端（
files.example.com
）需要在响应头中设置
Access-Control-Allow-Origin
。例如，如果你的前端是
app.example.com
，服务器需要返回
Access-Control-Allow-Origin: https://app.example.com
或者
Access-Control-Allow-Origin: *
（不推荐生产环境使用
*
）。如果你的请求带有认证信息（如
credentials: 'include'
或设置了
Authorization
头），那么服务器还需要设置
Access-Control-Allow-Credentials: true
，并且
Access-Control-Allow-Origin
不能是
*
，必须是具体的源。如果服务器没有正确设置CORS头，JavaScript请求就会被浏览器拦截，你将无法获取到文件数据（
response.blob()
会失败），也就无法进行后续的下载操作。
安全性问题：文件下载的安全性主要体现在以下几个方面：
认证与授权： 确保只有有权限的用户才能下载特定文件。这通常通过在下载请求中包含认证Token（如JWT）并在后端进行验证来实现。后端验证通过后才返回文件流。文件内容验证： 后端在存储文件时，应该对文件内容进行扫描，检查是否存在恶意代码、病毒等。前端虽然无法直接扫描，但可以通过后端返回的元数据（如文件哈希值）进行校验。文件名与路径遍历： 后端在处理下载请求时，绝不能直接使用前端传入的文件名或路径来定位文件。必须对文件名进行严格的验证和净化，防止路径遍历攻击（例如
../../etc/passwd
），确保用户只能下载到指定目录下的文件。MIME类型欺骗： 后端返回文件时，应根据文件的实际内容设置正确的
Content-Type
头，而不是盲目相信用户上传时提供的MIME类型。这可以防止浏览器将恶意文件（如伪装成图片的JavaScript文件）误认为安全类型而执行。敏感信息泄露： 确保下载的文件本身不包含不应暴露给用户的敏感信息。对于一些需要动态生成或脱敏的报告，后端应在生成时就处理好。
我个人觉得，对于敏感文件下载，后端务必做好权限控制和文件内容安全扫描，前端能做的更多是确保请求的正确性和展示友好提示。而跨域问题，通常是前端开发和后端开发需要坐下来一起协商解决的，确保CORS策略配置得当。
除了传统的文件上传，现代Web应用还有哪些更高效或用户友好的方式？
传统的文件上传，就是点个按钮、弹个文件选择框，然后上传。这种方式虽然基础，但有时候确实不够“现代化”。现在很多Web应用都在用户体验上下功夫，文件上传也不例外。
拖拽上传（Drag-and-Drop）：这简直是用户体验的巨大提升。用户可以直接把文件从桌面拖到网页的指定区域，文件就自动开始上传了。实现上，这主要依赖于
dragover
、
dragleave
、
drop
等DOM事件，以及
DataTransfer
对象来获取拖拽进来的文件。
const dropArea = document.getElementById('dropArea'); // 假设有一个ID为dropArea的DOM元素作为拖拽区域['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false);});function preventDefaults(e) { e.preventDefault(); e.stopPropagation();}// 视觉反馈：当文件在拖拽区域上方时，改变样式['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);});['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);});dropArea.addEventListener('drop', (e) => { const dt = e.dataTransfer; const files = dt.files; // 获取拖拽进来的文件列表 // 接下来就可以像处理input.files一样，用FormData上传这些文件了 console.log('拖拽文件:', files); // 调用上传函数，例如：uploadFiles(files);}, false);
这种方式极大简化了用户操作，特别是对于需要上传多个文件的场景。
分块上传（Chunked Uploads）：对于非常大的文件（比如几百MB甚至几个GB），一次性上传可能会因为网络波动、服务器超时等原因失败。分块上传就是把大文件切分成许多小块，逐一上传，最后在服务器端进行合并。
优势： 提高上传成功率，支持断点续传。实现：前端使用
File.prototype.slice()
方法将文件切片。每个切片单独通过
fetch
或
XMLHttpRequest
发送，并带上切片序号、文件总大小、文件唯一标识等信息。后端接收所有切片后，根据文件唯一标识和切片序号进行合并。这玩意儿实现起来就比较复杂了，需要前端维护上传状态、切片进度，后端也要有完善的合并逻辑。但对于企业级应用，尤其是云存储服务，这是标配。
预签名URL上传（Pre-signed URLs）：这是一种将文件直接上传到云存储服务（如AWS S3、Azure Blob Storage）的策略，而不是先上传到你的应用服务器。
流程：前端请求你的应用服务器，告知要上传一个文件。你的应用服务器向云存储服务请求一个临时的、带有上传权限的URL（即预签名URL）。应用服务器将这个预签名URL返回给前端。前端直接将文件通过
PUT
请求上传到这个预签名URL。优势： 减轻了应用服务器的压力，特别是对于高并发的文件上传场景，因为文件数据流不再经过你的服务器。同时，也利用了云存储服务的高可用性和弹性伸缩能力。实现： 前端上传部分与普通
fetch
或
XMLHttpRequest
类似，只是目标URL是预签名的。关键在于后端如何生成这个URL，这通常依赖于云服务商提供的SDK。
这些方法，我觉得都是在“让用户更省心”这个方向上做文章。拖拽是交互上的优化，分块和预签名URL则是性能和架构上的考量，让大文件上传变得更可靠、更高效。选择哪种，还得看具体业务场景和文件大小。
以上就是怎么利用JavaScript实现文件上传与下载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1520976.html
微信扫一扫 
支付宝扫一扫 
