我要评论<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>dataurlbuilder</title>
</head>
<body>
<p>利用html5的filereader生成dataurl</p>
<input type="file" value="" onchange="builddataurl(this)" style="border:1px solid black;width:300px">
<br>
<textarea name="" id="txtbase64" cols="50" rows="30"></textarea>
<img id="imgview" src="" style="width:300px">
<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("txtbase64").value=e.target.result;
document.getelementbyid("imgview").src=e.target.result;
};
fr.readasdataurl(file);
}
}
</script>
</body>
<html>
参考资料
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/datatransfer]
总结:
1.file接口提供文件信息,并允许网页js访问其中内容
2.file对象的来源可能是:
mozgetasfile() api3.filelist对象: file对象的一个列表
访问方法: filelist[index] 或 filelist.item(index)
4.filereader对象允许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 file或 blob对象指定要读取的文件或数据.
5.filereader对象的属性,方法,事件处理:
属性
filereader.error(只读): 表示在读取文件时发生的错误
filereader.readystate(只读): 表示filereader读取状态的数字
| 常量名 | 值 | 含义 |
|---|---|---|
| empty | 0 | 尚未加载任何数据 |
| loading | 1 | 数据正在加载中 |
| done | 2 | 已完成全部加载请求 |
filereader.result(只读): 上一次读取的文件的内容(仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作--这是用filereader将图片转换为dataurl的关键)
方法
事件
| 事件 | 触发时机 |
|---|---|
| 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("txtbase64").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.拖放操作涉及的步骤:
3.我们本次尝试只涉及到最后两步,代码如下:
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="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="txtbase64" 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("txtbase64").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.代码分析:
如对本文有疑问， 点击进行留言回复！！
网友评论