首页 > 作文

FileReader生成图片dataurl的分析

更新时间:2023-04-06 06:17:54 阅读：评论：0

file api及filereader简介

参考资料

1.[file接口][https://developer.mozilla.org/zh-cn/docs/web/api/file]

2.[filereader接口][https://developer.mozilla.org/zh-cn/docs/web/api/filereader]

3.[filelist接口][https://developer.mozilla.org/zh-cn/docs/web/api/filelist]

4.[datatransfer接口][https://developer.mozilla.org/zh-cn/docs/web/api/datatr化妆的正确步骤ansfer]

总结:

1.file接口提供文件信息,并允许网页js访问其中内容

2.file对象的来源可能是:

input元素上选择文件后返回的 filelist对象(inuputelement.files)自由拖放操作生成的 datatransfer 对象来自 htmlcanvalement上的 mozgetasfile() api

3.filelist对象: file对象的一个列表

访问方法: filelist[index] 或 filelist.item(index)

4.filereader对象允许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 file或 blob对象指定要读取的文件或数据.

5.filereader对象的属性,方法,事件处理:

属性

filereader.error(只读): 表示在读取文件时发生的错误

filereader.readystate(只读): 表示fileread我是歌手巅峰会er读取状态的数字

常量名值含义empty0尚未加载任何数据loading1数据正在加载中done2已完成全部加载请求

filereader.result(只读): 上一次读取的文件的内容(仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作–这是用filereader将图片转换为dataurl的关键)

方法

filereader.abort(): 中止读取,返回时readystate设为donefilereader.readasarraybuffer(): 读取指定blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 arraybuffer数据对象filereader.readasdataurl(): 读取指定blob中的内容, 一旦完成, result 属性中将包含一个data:url格式字符串表示所读内容filere高考加油语录简短霸气ader.readastext(): 读取指定blob中的内容, 一旦完成, result 属性中将包含一个字符串表示所读内容

事件

事件触发时机filereader.onabort读取被中断filereader.onerror读取出错filereader.onload读取成功filereader.onloadstart开始读取时filereader.onloadend读取完毕(成功/失败)filereader.onprogress读取过程中

注:filereader继承自eventtarget，所以所有这些事件也可以通过addeventlistener方法使用。

结合补充知识进行代码分析

<input type="file" value="" onchange="builddataurl(this)" style="border:1px solid black;width:300px">

用input元素(type为file),通过选择文件获取file对象列表并为之绑定onchange事件.当选择文件时,input输入域内容改变,调用dataurl的产生函数builddataurl()

function builddataurl(source){            var file = source.files[0]; //通过input的files属性获取选择的文件对应的file对象            if(window.filereader){ //浏览器支持检测                var fr = new filereader(); //构造一个filereader对象fr                fr.onloadend = function(e){ //为fr对象绑定onloadend事件(当文件读取完毕时触发,此时result已经获取了加载内容)                    document.getelementbyid("txtba64").value=e.target.result; //e.target等同于this                    document.getelementbyid("imgview").src=e.target.result;                };                fr.readasdataurl(file); //以data:url格式读取选择的文件,读取完毕时触发fr的onloadend事件            }        }

修改尝试: 拖曳图片到网页完成转换

1.实质: 修改file对象的来源及输入方式

2.知识补充:

[datatransfer接口][https://developer.mozilla.org/zh-cn/docs/web/api/datatransfer]

[html拖放api][https://developer.mozilla.org/zh-cn/docs/web/api/html_drag_and_drop_api]

[html5拖放][]

总结:

1.datatransfer对象: 在进行拖放操作时,用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。

我们用到的属性: files–拖动文件时的有效文件列表(不涉及文件拖动时,此列表为空)

2.datatransfer对象的获取: 在拖动事件的事件对象event中的datatransfer属性中保存

3.拖放操作涉及的步骤:

设置元素为可拖放(draggable 属性设置为 true)拖动什么 – ondragstart 和 tdata()设置被拖数据放到何处 – ondragover(需要取消事件的默认操作)进行放置及数据处理 – ondrop(需要取消事件的默认操作)

3.我们本次尝试只涉及到最后两步,代码如下:

<!doctype html><html lang="zh-cn"><head>    <meta chart="utf-8">    <title>dataurlbuilder</title></head><body>    <p>利用html5的filereader生成dataurl</p>        <div style="width:300px;height:100px;border:1px solid black;text-align:center;" ondragover="allowdrop(event)" ondrop="drop(event)">拖曳图片到此处完成转换</div>        <img id="imgview" src="" style="width:300px" alt="图片预览">    <textarea name="" id="txtba64" cols="50" rows="30"></textarea>        <script type="text/javascript">        function builddataurl(source){            var file = source.files[0];            if(window.filereader){                var fr = new filereader();                fr.onloadend = function(e){                    document.getelementbyid("txtba64").value=this.result;                    document.getelementbyid("imgview").src=this.result;                };                fr.readasdataurl(file);            }      为什么要上大学  }        function allowdrop(event){            event.preventdefault();        }        function drop(event){            event.preventdefault();            builddataurl(event.datatransfer);        }    </script></body></html>

4.代码分析:

div元素设置被拖动文件的放置区绑定事件ondragover来允许文件的放置(取消事件默认行为)绑定事件ondrop来进行文件放置后的数据转处理img元素设置图片的预览区script元素–js代码:函数builddataurl()保持不变函数allowdrop()–cnsmin;ondragover事件的触发函数函数drop()–ondrop事件的触发函数: 通过event.datatransfer属性获取datatransfer对象,并以之作为参数调用builddataurl函数

本文发布于:2023-04-06 06:17:51，感谢您对本站的认可！

本文链接：https://www.wtabcd.cn/fanwen/zuowen/864997fc7850e9b335f1906756cfbf38.html

本文word下载地址：FileReader生成图片dataurl的分析.doc

本文 PDF 下载地址：FileReader生成图片dataurl的分析.pdf

上一篇：水中分娩有什么好处

下一篇：返回列表