javascript HTML5文件上传FileReader API

下面是关于JavaScript HTML5文件上传FileReader API的详细攻略：

什么是FileReader API？

FileReader API 是 HTML5 中的一款文件读取 API，使得客户端的 web 应用程序能够异步读取文件（即用户计算机中的本地文件，而不是通过网络获取的文件）。可以使用 FileReader 读取文本文件、二进制文件、数据 URL 等。

FileReader API的基本用法

下面是一个简单的 FileReader 示例，展示如何使用 FileReader API 读取一个本地文本文件：

const fileInput = document.getElementById('fileInput');
const fileDisplay = document.getElementById('fileDisplay');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.readAsText(file);

  reader.onload = (event) => {
    const result = event.target.result;
    fileDisplay.innerText = result;
  };
}, false);

代码解释：

• 我们首先获取 input 元素和用于展示文件内容的元素。
• 接着我们给 input 元素添加一个 change 事件监听器，以便在 users 选择文件时获取文件。
• 一旦我们获取到了文件，我们创建一个 FileReader 对象，将其读取为文本。然后通过 onload 回调获取文件内容，并将它显示在 fileDisplay 元素上。

如果我们想加载文件的二进制数据，可以使用 readAsBinaryString() 方法。

const fileInput = document.getElementById('fileInput');
const fileDisplay = document.getElementById('fileDisplay');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.readAsBinaryString(file);

  reader.onload = (event) => {
    const result = event.target.result;
    fileDisplay.innerText = result;
  };
}, false);

使用 FileReader API 上传 File

可以使用 AJAX 请求以异步方式上传 File，可以使用 XMLHttpRequest 或任何度量不多于 100 行代码的 Ajax 库（例如 SuperAgent，fetch，axios 等）。

const fileInput = document.getElementById('fileInput');
const fileDisplay = document.getElementById('fileDisplay');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.readAsDataURL(file);

  reader.onload = (event) => {
    const result = event.target.result;
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.setRequestHeader('Content-Type', 'application/octet-stream');
    xhr.send(result);
  };
}, false);

这个示例通过 Ajax POST 请求将文件的内容上传到 /upload 端点。

总结

FileReader API 可以方便地读取本地文件、二进制数据等，还可以通过 Ajax 请求将文件上传到服务器。这是一种非常有用的 Web API 让开发者能够更好的开发和扩展现代 Web 应用程序。