h5 加载图片后显示的代码分析

最新推荐文章于 2023-09-18 10:09:06 发布

人工智能时代

最新推荐文章于 2023-09-18 10:09:06 发布

阅读量1.7k

点赞数

分类专栏： web前端文章标签： h5加载图片加载图片 FileReader readAsDataURL

本文链接：https://blog.csdn.net/yyhjifeng/article/details/78132067

版权

web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

加载图片后显示的代码分析

功能：加载图片，然后显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="file" id='file'; οnchange="c()" />
    <img src="" id='show' />
</body>
<script type="text/javascript">
    function c () {
        var r= new FileReader();
        f=document.getElementById('file').files[0];
        r.readAsDataURL(f);
        r.οnlοad=function  (e) {
        document.getElementById('show').src=this.result;
    };
}
</script>
</html>

一：

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。

参考文档：http://blog.okbase.net/jquery2000/archive/1296.html

二：

当 FileReader 读取文件的方式为 readAsArrayBuffer, readAsBinaryString, readAsDataURL 或者 readAsText 的时候，会触发一个 load 事件。从而可以使用 FileReader.onload 属性对该事件进行处理。

// 一个文件上传的回调 <input type="file" οnchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // 文件里的文本会在这里被打印出来
    console.log(event.target.result)
  };

  reader.readAsText(file);
}

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload