JS图片预览

最新推荐文章于 2024-06-27 16:21:53 发布

ammhzm4257

最新推荐文章于 2024-06-27 16:21:53 发布

阅读量76

点赞数

原文链接：http://www.cnblogs.com/n-b-s-p/p/7762197.html

版权

<!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事件，将图片数据显示到页面上。

FileReader

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

readAsDataURL()

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

转载于:https://www.cnblogs.com/n-b-s-p/p/7762197.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ammhzm4257

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS图片预览

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片预览</title></head><body> <input type="file" class="f...
复制链接

扫一扫