登录
首页 >  文章 >  前端

JavaScript实现文件上传与下载教程

时间：2025-11-18 18:27:48 327浏览 收藏

还在为JavaScript文件上传下载发愁？本文为你提供一站式解决方案！**详细讲解了如何利用 `<input type="file">` 元素、FormData 对象和 fetch API 实现前端文件上传，并结合示例代码，展示了如何构建文件上传的 HTML 结构和 JavaScript 逻辑。**同时，**深入探讨了如何通过 a 标签的 download 属性或 Blob 对象，轻松实现文件下载功能。**此外，还分享了**实现上传进度条、错误处理、跨域请求、安全性问题以及拖拽上传、分块上传、预签名URL上传等更高效、用户友好的现代Web应用文件上传方式。**无论是初学者还是有经验的开发者，都能从中获益，快速掌握 JavaScript 文件上传下载的核心技术，提升Web应用的用户体验和性能。

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

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

利用JavaScript实现文件上传和下载，核心思路其实就是前端与后端进行数据交互，文件上传主要是通过FormData对象将文件数据打包发送给服务器，而文件下载则更多是利用浏览器自身能力，比如标签的download属性，或者通过Blob对象和URL.createObjectURL来模拟点击下载。这两种操作都离不开浏览器提供的Web API和一些巧妙的客户端处理。

解决方案

文件上传

文件上传通常需要一个input元素来选择文件，然后通过JavaScript将文件数据发送到服务器。这里我们主要依赖FormData和fetch API。

  1. HTML 结构：

    &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; multiple&gt;
<button id="uploadButton">上传文件</button>
<div id="uploadStatus"></div>

  2. JavaScript 逻辑：

    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类型的请求，并保存文件。

文件下载

文件下载的实现方式取决于文件来源。

  1. 直接链接下载： 如果你有一个可以直接访问的文件URL（例如 /files/document.pdf），最简单的方法就是使用标签的download属性。

    <a href="/files/document.pdf" download="我的文档.pdf">下载PDF</a>

    download属性会告诉浏览器以指定的文件名保存文件，而不是尝试在浏览器中打开它。

  2. 通过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
// <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），那么浏览器会遵循同源策略。

安全性问题： 文件下载的安全性主要体现在以下几个方面：

  1. 认证与授权： 确保只有有权限的用户才能下载特定文件。这通常通过在下载请求中包含认证Token（如JWT）并在后端进行验证来实现。后端验证通过后才返回文件流。
  2. 文件内容验证： 后端在存储文件时，应该对文件内容进行扫描，检查是否存在恶意代码、病毒等。前端虽然无法直接扫描，但可以通过后端返回的元数据（如文件哈希值）进行校验。
  3. 文件名与路径遍历： 后端在处理下载请求时，绝不能直接使用前端传入的文件名或路径来定位文件。必须对文件名进行严格的验证和净化，防止路径遍历攻击（例如../../etc/passwd），确保用户只能下载到指定目录下的文件。
  4. MIME类型欺骗： 后端返回文件时，应根据文件的实际内容设置正确的Content-Type头，而不是盲目相信用户上传时提供的MIME类型。这可以防止浏览器将恶意文件（如伪装成图片的JavaScript文件）误认为安全类型而执行。
  5. 敏感信息泄露： 确保下载的文件本身不包含不应暴露给用户的敏感信息。对于一些需要动态生成或脱敏的报告，后端应在生成时就处理好。

我个人觉得，对于敏感文件下载，后端务必做好权限控制和文件内容安全扫描，前端能做的更多是确保请求的正确性和展示友好提示。而跨域问题，通常是前端开发和后端开发需要坐下来一起协商解决的，确保CORS策略配置得当。

除了传统的文件上传，现代Web应用还有哪些更高效或用户友好的方式？

传统的文件上传，就是点个按钮、弹个文件选择框，然后上传。这种方式虽然基础，但有时候确实不够“现代化”。现在很多Web应用都在用户体验上下功夫，文件上传也不例外。

  1. 拖拽上传（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);

    这种方式极大简化了用户操作，特别是对于需要上传多个文件的场景。

  2. 分块上传（Chunked Uploads）： 对于非常大的文件（比如几百MB甚至几个GB），一次性上传可能会因为网络波动、服务器超时等原因失败。分块上传就是把大文件切分成许多小块，逐一上传，最后在服务器端进行合并。

  3. 预签名URL上传（Pre-signed URLs）： 这是一种将文件直接上传到云存储服务（如AWS S3、Azure Blob Storage）的策略，而不是先上传到你的应用服务器。

这些方法，我觉得都是在“让用户更省心”这个方向上做文章。拖拽是交互上的优化，分块和预签名URL则是性能和架构上的考量，让大文件上传变得更可靠、更高效。选择哪种，还得看具体业务场景和文件大小。

好了，本文到此结束，带大家了解了《JavaScript实现文件上传与下载教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>