怎么利用JavaScript实现文件上传与下载？-js教程-PHP中文网

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

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

利用JavaScript实现文件上传和下载，核心思路其实就是前端与后端进行数据交互，文件上传主要是通过

FormData

登录后复制

对象将文件数据打包发送给服务器，而文件下载则更多是利用浏览器自身能力，比如

<a>

登录后复制

标签的

download

登录后复制

属性，或者通过

Blob

登录后复制

对象和

URL.createObjectURL

登录后复制

来模拟点击下载。这两种操作都离不开浏览器提供的Web API和一些巧妙的客户端处理。

解决方案

文件上传

文件上传通常需要一个

input

登录后复制

元素来选择文件，然后通过JavaScript将文件数据发送到服务器。这里我们主要依赖

FormData

登录后复制

和

fetch

登录后复制

API。

HTML 结构：

<input type="file" id="fileInput" multiple>
<button id="uploadButton">上传文件</button>
<div id="uploadStatus"></div>

登录后复制

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
```
登录后复制
），最简单的方法就是使用
```
<a>
```
登录后复制
标签的
```
download
```
登录后复制
属性。
```
<a href="/files/document.pdf" download="我的文档.pdf">下载PDF</a>
```
登录后复制
```
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"

登录后复制

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

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

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

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

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

XMLHttpRequest

登录后复制

的

upload.onprogress

登录后复制

事件。虽然前面我用了

fetch

登录后复制

，它更现代，但在处理上传进度方面，

XMLHttpRequest

登录后复制

目前提供了一个更方便的API。

fetch

登录后复制

虽然也能通过

ReadableStream

登录后复制

实现进度，但那要复杂得多，通常我们不会为了一个进度条去搞那么复杂。

// HTML
// <progress id="progressBar" value="0" max="100"></progress>
// <span id="progressText">0%</span>

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

登录后复制

），那么浏览器会遵循同源策略。

直接链接下载（
```
<a>
```
登录后复制
标签的
```
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）的策略，而不是先上传到你的应用服务器。
- 流程：
  1. 前端请求你的应用服务器，告知要上传一个文件。
  2. 你的应用服务器向云存储服务请求一个临时的、带有上传权限的URL（即预签名URL）。
  3. 应用服务器将这个预签名URL返回给前端。
  4. 前端直接将文件通过
```
PUT
```
    登录后复制
    请求上传到这个预签名URL。
- 优势： 减轻了应用服务器的压力，特别是对于高并发的文件上传场景，因为文件数据流不再经过你的服务器。同时，也利用了云存储服务的高可用性和弹性伸缩能力。
- 实现： 前端上传部分与普通
```
fetch
```
  登录后复制
  或
```
XMLHttpRequest
```
  登录后复制
  类似，只是目标URL是预签名的。关键在于后端如何生成这个URL，这通常依赖于云服务商提供的SDK。