利用html5 file api读取本地文件示例(如图片、PDF等)

下面是利用html5 file api读取本地文件示例的完整攻略：

一、前置知识

在进行本地文件读取之前，需要了解以下知识：

1. HTML5 File API：针对文件的API，可以在不上传文件的情况下对本地文件进行读取和操作。
2. FileReader对象：可以帮助我们读取本地文件内容的对象。

二、实现步骤

首先，我们需要在HTML文件中添加一个文件选择框，让用户可以选择本地文件：

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

然后，我们需要在JavaScript中对该选择框进行监听，当用户选择文件后，就可以进行读取操作：

var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(event) {
  var file = event.target.files[0];
  //利用FileReader对象读取文件内容
});

接下来，我们需要使用FileReader对象读取文件内容。在以下示例中，我们将以图片文件为例：

示例一：读取图片文件

完整代码如下：

var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(event) {
  var file = event.target.files[0];

  if (!file.type.match('image.*')) {
    alert('请选择图片!');
    return;
  }

  var img = document.createElement('img');
  var reader = new FileReader();

  reader.onload = function(event) {
    img.src = event.target.result;
  }

  reader.readAsDataURL(file);
  document.body.appendChild(img);
});

以上代码中，我们首先在监听函数中获取用户选择的文件，然后通过判断文件类型是否为图片文件进行验证；接着创建一个img标签，用于容纳读取到的图片内容，并在FileReader对象的onload事件中将图片数据放入img中；最后调用readAsDataURL方法，将文件内容以DataURL格式读取出来。

示例二：读取PDF文件

除了读取图片文件外，也可以通过FileReader对象来读取PDF文件的内容。具体示例如下：

var fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(event) {
  var file = event.target.files[0];

  if (!file.type.match('application/pdf')) {
    alert('请选择PDF文件!');
    return;
  }

  var reader = new FileReader();

  reader.onload = function(event) {
    var data = new Uint8Array(reader.result);
    pdfjsLib.getDocument(data).then(function(pdf) {
      pdf.getPage(1).then(function(page) {
        var viewport = page.getViewport({scale: 1.0});
        var canvas = document.createElement('canvas');
        var canvasContext = canvas.getContext('2d');

        canvas.height = viewport.height;
        canvas.width = viewport.width;

        page.render({canvasContext, viewport}).then(function() {
          document.body.appendChild(canvas);
        });
      });
    });
  }

  reader.readAsArrayBuffer(file);
});

在这个示例中，我们首先判断用户选择的文件类型是否为PDF，然后声明一个FileReader对象。接着，在FileReader对象的onload事件中，我们首先将读取到的PDF文件内容转换成一个Uint8Array类型的数据，传入pdfjsLib的getDocument函数中获取PDF对象；接着，我们通过pdf.getPage获取PDF的第一页，再获取该页面的视窗viewport；接着根据该视窗创建一个canvas元素，并通过page.render将该页面内容渲染到canvas中；最后将canvas元素放到body中供用户查看。

三、总结

通过以上示例，我们可以看到，利用HTML5 File API和FileReader对象可以方便地读取本地文件内容，实现PDF、图片等文件的在线查看。需要注意的是，在读取文件内容之前，需要对文件类型进行验证，以保证程序的正确性。