巧用HTML5 File API本地读取图片PDF等文件，开发更丝滑

html5 file api读取本地文件（如图片、PDF等）

## HTML5 File API 简介

HTML5 File API 是一个用于处理文件上传和下载的 API。它允许 Web 应用直接访问用户计算机上的文件，而无需使用任何服务器端技术。File API 提供了一系列方法来读取、写入和移动文件，包括：

* `FileReader` 接口：用于读取文件的内容。
* `FileWriter` 接口：用于写入文件的内容。
* `Blob` 接口：代表一个文件或二进制数据。
* `File` 接口：代表一个用户选择的文件。

## 读取本地文件

要使用 File API 读取本地文件，可以按照以下步骤进行：

1. 使用 `<input type="file">` 元素创建一个文件选择器。
2. 监听文件选择器上的 `change` 事件。
3. 在 `change` 事件处理函数中，使用 `FileReader` 接口读取文件的内容。
4. 将读取到的文件内容显示在网页上。

以下是一个使用 File API 读取本地图片的示例代码：

```html
<input type="file" id="file-input">

<script>
  document.getElementById('file-input').addEventListener('change', function() {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function() {
      var img = document.createElement('img');
      img.src = reader.result;

      document.body.appendChild(img);
    };

    reader.readAsDataURL(file);
  });
</script>

读取本地PDF文件

要使用 File API 读取本地 PDF 文件，可以按照以下步骤进行：

1. 使用 <input type="file"> 元素创建一个文件选择器。
2. 监听文件选择器上的 change 事件。
3. 在 change 事件处理函数中，使用 FileReader 接口读取文件的内容。
4. 将读取到的文件内容转换为 PDF 文档。
5. 将 PDF 文档显示在网页上。

以下是一个使用 File API 读取本地 PDF 文件的示例代码：

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

<script>
  document.getElementById('file-input').addEventListener('change', function() {
    var file = this.files[0];

    var reader = new FileReader();
    reader.onload = function() {
      var pdf = new PDFJS.getDocument(reader.result);

      pdf.then(function(pdf) {
        var page = pdf.getPage(1);

        page.then(function(page) {
          var canvas = document.createElement('canvas');
          var context = canvas.getContext('2d');

          var viewport = page.getViewport(1);
          canvas.width = viewport.width;
          canvas.height = viewport.height;

          page.render({
            canvasContext: context,
            viewport: viewport
          });

          document.body.appendChild(canvas);
        });
      });
    };

    reader.readAsArrayBuffer(file);
  });
</script>

File API 的其他特性和应用

除了读取本地文件之外，File API 还提供了许多其他特性和应用，包括：

• 拖放文件： 允许用户将文件拖放到网页上。
• 文件写入： 允许用户将文件写入本地计算机。
• 文件移动： 允许用户将文件从一个位置移动到另一个位置。
• 文件复制： 允许用户将文件复制到本地计算机。
• 文件删除： 允许用户删除本地计算机上的文件。

File API 非常强大，可以用来构建各种各样的 Web 应用，包括：

• 图片上传： 允许用户上传图片到服务器。
• 视频上传： 允许用户上传视频到服务器。
• 文件共享： 允许用户与其他人共享文件。
• 在线文档编辑： 允许用户在线编辑文档。
• 在线图片编辑： 允许用户在线编辑图片。

总结

HTML5 File API 是一个非常强大的 API，可以用来在不上传到服务器的情况下读取本地图片和 PDF 文件，从而实现更快的文件处理和更流畅的用户体验。此外，File API 还提供了许多其他特性和应用，可以用来构建各种各样的 Web 应用。