怎么利用JavaScript实现文件上传与下载？

幻影之瞳

发布时间：2025-09-19 21:22:01

986人浏览过

来源于php中文网

原创

文件上传通过FormData和fetch将文件发送至服务器，下载则利用a标签download属性或Blob对象实现；上传支持进度条与错误处理，下载需处理跨域与安全问题，现代方案还包括拖拽、分块上传和预签名URL。

怎么利用javascript实现文件上传与下载？

利用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
```
属性。
```
下载PDF
```
```
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"

，这样前端才能获取到推荐的文件名。

ERMEB云盘发卡系统源码

ERMEB云盘发卡系统官方正版系统，发卡系统操作简单、方便、易懂。系统微信小程序前端采用nuiapp后端采用think PHP6PC前端采用vue开发使用场景：文件上传储存，适合个人/个体/中小企业使用。本系统配合微信小程序端进行使用，文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取，小程序内可设置积分充值以及任务获取积分，支持微信激励广告领取文件下载码以及卡密商品，可实现

下载

文件上传时，如何实现进度条显示和错误处理？

文件上传，特别是大文件上传，进度条这东西对用户体验是真加分，谁都不想看着一个没反应的页面干等。至于错误处理，那更是健壮应用不可或缺的一部分。

实现上传进度条，最直接的方式是使用

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 < 300) {
            // 上传成功
            uploadStatus.textContent = `上传成功！服务器响应：${xhr.responseText}`;
            progressBar.value = 100;
            progressText.textContent = '100%';
            fileInput.value = '';
        } else {
            // 上传失败（HTTP状态码非2xx）
            uploadStatus.textContent = `上传失败: ${xhr.status} ${xhr.statusText} - ${xhr.responseText}`;
        }
    };

    // 监听网络错误
    xhr.onerror = () => {
        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
```
  发送，并带上切片序号、文件总大小、文件唯一标识等信息。
- 后端接收所有切片后，根据文件唯一标识和切片序号进行合并。
这玩意儿实现起来就比较复杂了，需要前端维护上传状态、切片进度，后端也要有完善的合并逻辑。但对于企业级应用，尤其是云存储服务，这是标配。