JavaScript File API文件上传预览

下面是关于“JavaScript File API文件上传预览”的完整攻略。

什么是JavaScript File API文件上传预览？

JavaScript File API 文件上传预览是浏览器API之一，主要用于在浏览器中的上传文件操作中，可以通过JavaScript获取文件内容并展示到网页上，给用户更加直观的展示效果。

实现文件上传预览的步骤

1. 获取input[type=file]控件的文件对象

在HTML中，通过使用input[type=file]控件，用户可以选择上传文件

<form>
  <input type="file" id="file" name="file" />
</form>

当该控件选择文件后，通过JavaScript的事件监听功能来获取文件对象

<script type="text/javascript">
  document.querySelector("#file").addEventListener("change", function () {
    var file = this.files[0]; // 获取控件中选择的文件对象
    console.log(file);
  });
</script>

2. 读取文件对象内容

在获取文件内容之前，需要先判断浏览器是否支持FileReader，如果不支持则需要手动修改浏览器设置

if (!window.FileReader) {
  alert('浏览器不支持FileReader');
  return;
}

然后通过FileReader来读取文件内容

var reader = new FileReader();
reader.readAsDataURL(file);

3. 在页面上展示文件内容

通过FileReader的读取操作完成后，就可以将文件内容显示在页面上了，可以使用以下两种方式之一来实现：

3.1 通过img标签展示图片内容

var img = document.querySelector("#preview");
reader.onload = function () { // 读取成功后触发的回调函数
  img.src = reader.result;
};

3.2 通过创建Blob URL来展示非图片内容

var a = document.querySelector("#download");
reader.onload = function () {
  var url = URL.createObjectURL(file);
  a.href = url;
};

示例说明

示例1：显示图片预览

假设我们有以下HTML代码

<form>
  <input type="file" id="file" name="file" />
  <img id="preview" />
</form>

实现以下JavaScript代码，可以实现显示选择的图片预览

<script type="text/javascript">
  document.querySelector("#file").addEventListener("change", function () {
    var file = this.files[0];
    if (!window.FileReader) {
      alert('浏览器不支持FileReader');
      return;
    }
    var reader = new FileReader();
    var img = document.querySelector("#preview");
    reader.onload = function () {
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
  });
</script>

示例2：创建下载链接

假设我们有以下HTML代码

<form>
  <input type="file" id="file" name="file" />
  <a id="download" download>下载</a>
</form>

实现以下JavaScript代码，可以实现创建文件下载链接

<script type="text/javascript">
  document.querySelector("#file").addEventListener("change", function () {
    var file = this.files[0];
    if (!window.FileReader) {
      alert('浏览器不支持FileReader');
      return;
    }
    var reader = new FileReader();
    var a = document.querySelector("#download");
    reader.onload = function () {
      var url = URL.createObjectURL(file);
      a.href = url;
    };
    reader.readAsDataURL(file);
  });
</script>

以上就是关于“JavaScript File API文件上传预览”的完整攻略。