当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript文件上传实现全解析

JavaScript文件上传实现全解析

2025-08-05 21:45:54 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS实现文件上传方法详解》，聊聊，希望可以帮助到正在努力赚钱的你。

文件上传需前后端配合，前端用JS实现文件选择、读取、数据构建和请求发送。1. 使用选择文件，通过监听change事件获取File对象，读取文件名、大小、类型等信息。2. 利用FileReader读取文件内容，支持readAsDataURL（图片预览）、readAsText（文本读取）、readAsArrayBuffer（二进制处理）等方式。3. 使用FormData对象构建上传数据，通过append方法添加文件和其他字段。4. 发送请求可使用XMLHttpRequest或Fetch API，前者支持进度监听，后者语法更简洁。5. 通过xhr.upload.onprogress事件实时获取上传进度，计算已上传字节数与总字节数的比例。6. 常见问题包括跨域（需设置CORS）、文件大小和类型限制（前后端双重校验）、上传慢（采用分片上传）、中断续传（记录上传块）。7. 优化体验包括实现图片预览、进度条展示、友好错误提示、拖拽上传和多文件批量上传。完整流程由用户选择文件开始，经前端处理后发送至服务器，后端保存并返回结果，最终完成文件上传功能。

js怎么实现文件上传

文件上传，简单来说，就是把客户端的文件发送到服务器，然后服务器保存起来。这事儿，JS肯定得参与，但光靠JS还不够，得前后端配合。

文件上传，前端JS主要负责选择文件、读取文件信息、构建上传数据，然后用XMLHttpRequest或者Fetch API发送请求。后端则负责接收文件数据、存储文件，并返回结果。

怎么用JS选择文件？

最常见的就是标签。用户点击这个标签，浏览器会弹出文件选择对话框。

这段代码监听了change事件，当用户选择了文件，就能获取到File对象，里面包含了文件名、大小、类型等信息。注意event.target.files是一个FileList对象，里面包含了所有选中的文件，通常我们只取第一个。

如何读取文件内容？

有时候，我们需要在上传前读取文件内容，比如预览图片、校验文件格式等。可以使用FileReader对象。

const reader = new FileReader();

reader.onload = (event) => {
  // 文件读取完成，event.target.result 包含文件内容
  console.log('文件内容：', event.target.result);
  // 例如，如果是图片，可以创建一个img标签显示
  const img = document.createElement('img');
  img.src = event.target.result;
  document.body.appendChild(img);
};

reader.onerror = (event) => {
  console.error('文件读取出错：', event.target.error);
};

reader.readAsDataURL(file); // 将文件读取为Data URL

FileReader提供了多种读取文件的方式：

readAsText(file, encoding): 将文件读取为文本字符串。
readAsDataURL(file): 将文件读取为Data URL，常用于图片预览。
readAsArrayBuffer(file): 将文件读取为ArrayBuffer，用于处理二进制数据。
readAsBinaryString(file) (已废弃): 将文件读取为二进制字符串。

如何构建上传数据？

上传文件，通常使用FormData对象。它可以模拟一个完整的表单，包含文件和其他数据。

const formData = new FormData();
formData.append('myFile', file); // 添加文件
formData.append('name', 'John Doe'); // 添加其他数据

FormData对象使用append()方法添加数据，第一个参数是字段名，第二个参数是字段值。对于文件，直接添加File对象即可。

如何发送上传请求？

可以使用XMLHttpRequest或者Fetch API发送请求。

使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload'); // 上传接口地址

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log('上传成功：', xhr.responseText);
  } else {
    console.error('上传失败：', xhr.statusText);
  }
};

xhr.onerror = () => {
  console.error('请求出错');
};

xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度：', percentComplete.toFixed(2) + '%');
  }
};

xhr.send(formData); // 发送FormData

使用Fetch API：

fetch('/upload', {
  method: 'POST',
  body: formData,
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json(); // 或者 response.text()
})
.then(data => {
  console.log('上传成功：', data);
})
.catch(error => {
  console.error('上传失败：', error);
});

Fetch API 看起来更简洁，但需要注意处理错误情况。

如何显示上传进度？

XMLHttpRequest提供了upload.onprogress事件，可以监听上传进度。

xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度：', percentComplete.toFixed(2) + '%');
  }
};

event.loaded表示已上传的字节数，event.total表示总字节数。event.lengthComputable表示是否可以计算进度。