JS+HTML5 FileReader实现文件上传前本地预览功能

2023年5月27日上午6:37 • JavaScript

下面我来详细讲解如何使用JS+HTML5 FileReader实现文件上传前本地预览功能。

什么是FileReader

FileReader是一个HTML5规范中引入的API，可以将本地计算机上的文件读取到浏览器中。它是通过File API提供的，我们可以使用它读取文件的内容，以便进行一些操作，例如预览图片、验证文件内容等。

FileReader使用方法

使用FileReader的过程一般包括以下几个步骤：

获取文件：将用户选择的文件保存到一个变量中。
创建FileReader对象：使用new FileReader()创建FileReader实例。
监听onload事件：使用FileReader实例的onload事件监听器，当文件读取完成时触发它。
读取文件：使用FileReader实例的readAsDataURL()方法，开始读取文件并将其转换为base64格式的字符串，以供预览。

这样读取文件后，就可以使用读取完成后的base64字符串来实现一些功能，例如展示预览图或者将文件上传到服务器等。

示例示意代码

接下来通过两个简单的实例代码，演示如何使用FileReader实现文件上传前本地预览功能。

示例一：图片上传前本地预览

在HTML中，我们设置一个input标签用于上传图片，然后使用JavaScript监听它的change事件，获取用户选择的文件内容，使用FileReader转换成base64字符串，最后将它赋值给一个img标签的src属性，从而实现图片上传前在浏览器端显示预览图的效果。

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>图片上传前本地预览</title>
  <script>
    function previewFile() {
      var preview = document.querySelector('img');
      var file = document.querySelector('input[type=file]').files[0];
      var reader = new FileReader();

      reader.onloadend = function() {
        preview.src = reader.result;
      }

      if (file) {
        reader.readAsDataURL(file);
      } else {
        preview.src = "";
      }
    }
  </script>
</head>

<body>
  <input type="file" onchange="previewFile()" accept="image/*">
  <img src="" style="max-width: 100%;">
</body>

</html>

示例二：文本文件上传前本地预览

在这个例子中，我们同样设置一个input标签用于上传文本文件，然后同样使用JavaScript监听它的change事件，获取文件内容，使用FileReader转换成字符串，并将它显示在页面上。

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>文本文件上传前本地预览</title>
  <script>
    function previewFile() {
      var preview = document.querySelector('pre');
      var file = document.querySelector('input[type=file]').files[0];
      var reader = new FileReader();

      reader.onloadend = function() {
        preview.innerText = reader.result;
      }

      if (file) {
        reader.readAsText(file);
      } else {
        preview.innerText = "";
      }
    }
  </script>
</head>

<body>
  <input type="file" onchange="previewFile()" accept=".txt">
  <pre style="background-color: #eee; padding: 5px;"></pre>
</body>

</html>

以上就是使用JS+HTML5 FileReader实现文件上传前本地预览的完整攻略，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS+HTML5 FileReader实现文件上传前本地预览功能 - Python技术站