JavaScript文件上传实现全解析

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

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

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

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

怎么用JS选择文件？

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

<input type="file" id="myFile">

这段代码监听了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表示是否可以计算进度。

常见的上传问题和解决方案

• 跨域问题： 确保服务器允许跨域请求，设置Access-Control-Allow-Origin响应头。
• 文件大小限制： 前后端都要进行文件大小校验，避免上传过大的文件。
• 文件类型限制： 前端可以使用file.type校验文件类型，后端也要进行校验。
• 上传速度慢： 可以考虑分片上传，将大文件分割成小块，并行上传。
• 上传中断： 可以实现断点续传，记录已上传的块，下次继续上传未完成的块。

如何优化用户体验？

• 实时预览： 在用户选择文件后，立即显示预览，让用户确认选择是否正确。
• 进度条： 显示上传进度条，让用户了解上传状态。
• 友好的错误提示： 当上传失败时，给出明确的错误提示，帮助用户解决问题。
• 拖拽上传： 支持拖拽上传，让用户更方便地选择文件。
• 多文件上传： 支持多文件同时上传，提高效率。

总结

JS实现文件上传，涉及文件选择、读取、构建数据、发送请求等多个环节。需要前后端配合，才能实现完整的文件上传功能。同时，还需要考虑各种问题，例如跨域、文件大小限制、上传速度等，并进行优化，提升用户体验。

终于介绍完啦！小伙伴们，这篇关于《JavaScript文件上传实现全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！