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

文件上传下载_javascript文件处理

紅蓮之龍

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

原创

193人浏览过

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

文件上传下载_javascript文件处理

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

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

当用户通过选择文件后，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 字符串，可用于 @@##@@

登录后复制

上传文件到服务器

通常使用 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 对象，并模拟点击链接实现文件下载。

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

查看详情

例如，将一段文本保存为 .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文件处理

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