原生js实现图片预览功能

最新推荐文章于 2024-06-25 13:13:22 发布

程序媛-静儿

最新推荐文章于 2024-06-25 13:13:22 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： js 图片预览

本文链接：https://blog.csdn.net/qq_36711388/article/details/89646110

版权

javascript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

现在的UI框架已经帮助我们实现了前端大部分的基础功能，交互效果，下面我们来看看这些组件底层是如何实现图片上传预览的，主要是js的new FileReader()和readAsDataURL(file)


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" width="400" height="350">
    
</body>

</html>
<script>
 
function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
      var fr = new FileReader();
      fr.onloadend = function(e) {
        document.getElementById("portrait").src = e.target.result;
      };
      fr.readAsDataURL(file);
  }
}
</script>