JS图片预览

时间 2019-11-17

原文原文链接

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>图片预览</title>
</head>

<body>
  <input type="file" class="file">
  <div id="preview"></div>
  <script src="js/jquery.js"></script>
  <script>
  var file = new FileReader();
  file.onload = function(e) {
    document.getElementById('preview').innerHTML = '<img src="' + e.target.result + '">'
  }
  $('.file').on('change', function() {
    file.readAsDataURL(this.files[0]);
  });
  </script>
</body>

</html>

当文件选择框发生改变时获取到File对象（this.files[0]），使用readAsDateURL()函数，触发FileReader对象onload事件，将图片数据显示到页面上。html

FileReader jquery

对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。异步

readAsDataURL()

开始读取指定的Blob对象或File对象中的内容. 当读取操做完成时,readyState属性的值会成为DONE,若是设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data:URL格式的字符串以表示所读取文件的内容.函数