相关代码及html(来源:百度百科)
DataUrlBuilder利用HTML5的FileReader生成dataurl
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);
}
}
File API及FileReader简介
参考资料
总结:
1.File接口提供文件信息,并允许网页js访问其中内容
2.File对象的来源可能是:
input元素上选择文件后返回的 FileList对象(InuputElement.files)
自由拖放操作生成的 DataTransfer 对象
来自 HTMLCanvasElement上的 mozGetAsFile() API
3.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.abort(): 中止读取,返回时readyState设为DONE
FileReader.readAsArrayBuffer(): 读取指定Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象
FileReader.readAsDataURL(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个data:URL格式字符串表示所读内容
FileReader.readAsText(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个字符串表示所读内容
事件
事件
触发时机
FileReader.onabort
读取被中断
FileReader.onerror
读取出错
FileReader.onload
读取成功
FileReader.onloadstart
开始读取时
FileReader.onloadend
读取完毕(成功/失败)
FileReader.onprogress
读取过程中
注:FileReader继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。
结合补充知识进行代码分析
用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.知识补充:
总结:
1.DataTransfer对象: 在进行拖放操作时,用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。
我们用到的属性: files--拖动文件时的有效文件列表(不涉及文件拖动时,此列表为空)
2.DataTransfer对象的获取: 在拖动事件的事件对象event中的dataTransfer属性中保存
3.拖放操作涉及的步骤:
设置元素为可拖放(draggable 属性设置为 true)
拖动什么 - ondragstart 和 setData()设置被拖数据
放到何处 - ondragover(需要取消事件的默认操作)
进行放置及数据处理 - ondrop(需要取消事件的默认操作)
3.我们本次尝试只涉及到最后两步,代码如下:
DataUrlBuilder利用HTML5的FileReader生成dataurl
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);
}
4.代码分析:
div元素设置被拖动文件的放置区
绑定事件ondragover来允许文件的放置(取消事件默认行为)
绑定事件ondrop来进行文件放置后的数据转处理
img元素设置图片的预览区
script元素--js代码:
函数BuildDataUrl()保持不变
函数allowDrop()--ondragover事件的触发函数
函数drop()--ondrop事件的触发函数: 通过event.dataTransfer属性获取DataTransfer对象,并以之作为参数调用BuildDataUrl函数