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

来源：互联网发布：linux查看文件系统类型编辑：程序博客网时间：2024/05/21 18:01

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

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <input type="file" id='file'; onchange="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.onload=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" onchange="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

阅读全文

0 0