文件上传下载_javascript文件处理-js教程-PHP中文网

文件上传下载_javascript文件处理

紅蓮之龍

发布： 2025-11-28 20:22:02

原创

161人浏览过

前端通过File API读取文件，使用FormData和fetch上传，结合Blob实现下载。示例：监听input的change事件获取文件，用FileReader读内容；上传时将文件append至FormData并发送；下载则创建Blob对象，生成URL后模拟a标签点击触发保存。支持文本、图片、二进制数据，如canvas导出或网络请求结果下载。需校验类型与大小以确保安全。现代浏览器及移动端均良好支持。

文件上传下载_javascript文件处理

前端处理文件上传和下载是现代Web应用中的常见需求。JavaScript 提供了多种方式来实现文件的读取、上传和下载，尤其在浏览器端通过 File API 和 Blob 对象可以灵活操作用户选择的本地文件。

文件上传：使用 File API 读取用户选择的文件

当用户通过 <input type="file"> 选择文件后，JavaScript 可以通过事件对象访问文件列表。

示例代码：

const fileInput = document.getElementById('file-upload');
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0]; // 获取第一个选中文件
  if (!file) return;

  console.log('文件名:', file.name);
  console.log('文件大小:', file.size, '字节');
  console.log('MIME类型:', file.type);

  // 使用 FileReader 读取文件内容
  const reader = new FileReader();
  reader.onload = function(e) {
    const content = e.target.result;
    console.log('文件内容:', content);
  };
  reader.readAsText(file); // 以文本形式读取（适用于 txt、json 等）
});

登录后复制

对于图片预览等场景，可使用 readAsDataURL：

立即学习“Java免费学习笔记（深入）”；

reader.readAsDataURL(file); // 结果为 base64 字符串，可用于 <img src>

登录后复制

上传文件到服务器

通常使用 FormData 配合 fetch 或 XMLHttpRequest 发送文件。

const formData = new FormData();
formData.append('uploadFile', file);

fetch('/api/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(err => {
  console.error('上传失败:', err);
});

登录后复制

服务端需接收 multipart/form-data 格式的数据（如 Node.js 的 multer，Python 的 Flask/Django 处理等）。

触发文件下载：生成并下载 Blob 文件

JavaScript 可以创建 Blob 对象，并模拟点击链接实现文件下载。

电子手机配件网站源码1.0

电子手机配件网站源码是一个响应式的织梦网站模板，软件兼容主流浏览器，且可以在PC端和手机端中进行浏览。模板包含安装说明，并包含测试数据。本模板基于DEDECms 5.7 UTF-8设计，需要GBK版本的请自己转换。模板安装方法：1、下载最新的织梦dedecms5.7 UTF-8版本。2、解压下载的织梦安装包，得到docs和uploads两个文件夹，请将uploads里面的所有文件和文件夹上传到你的

查看详情

例如，将一段文本保存为 .txt 文件：

function downloadText(content, filename) {
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url); // 释放内存
}

// 调用
downloadText('Hello, 世界！', 'greeting.txt');

登录后复制

同样适用于 JSON、CSV 等结构化数据导出。

处理二进制数据与跨格式下载

除了文本，还可以处理图像、PDF 等二进制文件下载。

比如从 canvas 导出图片：

const canvas = document.getElementById('myCanvas');
canvas.toBlob(function(blob) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'drawing.png';
  a.click();
  URL.revokeObjectURL(url);
});

登录后复制

或从网络请求中下载文件：

fetch('/api/report.pdf')
.then(res => res.blob())
.then(blob => {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'report.pdf';
  a.click();
  URL.revokeObjectURL(url);
});

登录后复制

基本上就这些。掌握 File API、Blob、FormData 和 fetch 的组合使用，就能在前端高效完成大多数文件上传和下载任务。注意兼容性方面，现代浏览器都已良好支持这些特性，移动端也基本可用。安全上不要忘记对上传文件做类型校验和大小限制，防止恶意输入。

以上就是文件上传下载_javascript文件处理的详细内容，更多请关注php中文网其它相关文章！