前端上传文件实现的三个方法

前端无法直接操作本地文件，因此需要用户触发。常见的有三种触发方式：

• 通过<input type="file">表单控件
• 通过XMLHttpRequest对象
• 通过FileReader对象

通过<input type="file">表单控件

<input type="file">表单控件是一种专门用于选择文件的 HTML 元素。当用户点击该控件时，将会打开一个文件选择对话框，允许用户选择要上传的文件。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <input type="submit" value="上传">
</form>

通过XMLHttpRequest对象

XMLHttpRequest对象是一种用于与服务器进行异步通信的 JavaScript 对象。我们可以使用该对象来上传文件。

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');

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

xhr.send(formData);

通过FileReader对象

FileReader对象是一种用于读取文件内容的 JavaScript 对象。我们可以使用该对象来将文件内容转换为字符串或二进制数据。

const reader = new FileReader();
reader.onload = function() {
  const data = reader.result;
};

reader.readAsDataURL(file);

每种方法都有其优缺点，开发者可以根据具体情况选择合适的方法。

• <input type="file">表单控件 简单易用，但无法支持拖放上传。
• XMLHttpRequest对象 支持拖放上传，但需要更多的代码来实现。
• FileReader对象 可以将文件内容转换为字符串或二进制数据，但无法直接上传文件。

总结

本文介绍了三种在前端实现文件上传的方法。每种方法都有其优缺点，开发者可以根据具体情况选择合适的方法。