FileReader语法
属性
FileReader.error表示在读文件操作过程中发生的错误FileReader.readyState表示FileReader读取数据的状态，有三个值：
EMPTY：没有数据被加载
LOADING：数据正在被加载
LOADING：数据正在被加载
FileReader.result代表数据读取完成后的结果，只有在数据被加载完成后，result属性才有效。
事件
FileReader.onbort在FileReader的reading操作被中断的时候触发。FileReader.onerror在FileReader读取数据过程中发生错误时触发FileReader.onload在FileReader读取事件完成后调用FileReader.onloadstart在FileReader读取事件开始时调用FileReader.onloadend在FileReader读事件完成后调用FileReader.onprogress在FileReader读取数据的过程中调用
方法
FileReader.abort()中断读数据操作，直接返回，readyState将被设置为DONEFileReader.readAsArrayBuffer()读取Blob类型的数据，读取完成后返回ArrayBuffer对象，ArrayBuffer对象存储数据内容。FileReader.readAsBinaryString()读取一个Blob对象，将Blob对象中的原始二进制数据作为字符串的形式返回。FileReader.readAsDataURL()返回一个代表文件数据的URLFileReader.readAsTextString()读取一个Blob对象，返回一个文本字符串。
Demo
一个拖拽事件的demo,参考MDN
<!DOCTYPE html>
<html>
<head>
<title>文件拖拽</title>
<style type="text/css" rel="stylesheet">
*{
margin:0 auto;
}
html,body{
width:100%;
height:100%;
}
#container{
width:100%;
height:100%;
display:flex;
display:-webkit-flex;
justify-content:center;
align-items:center;
flex-direction:columns;
}
#child{
border:2px solid;
width:400px;
height:200px;
}
input{
width:200px;
height:40px;
margin-top:20px;
margin-left:10px;
}
p{
width:20px;
width:40px;
margin-left:10px;
margin-top:20px;
}
a{
display:inline-block;
height:30px;
width:200px;
margin-top:20px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="container">
<div id="child">
<h3>实现拖拽</h3>
<input id="nfiles" type="file" multiple/>
<p id="showfilesize">Size:</p>
</div>
</div>
<script type="text/javascript">
var pElement = document.getElementById('showfilesize');
var fileInputElement=document.getElementById('nfiles');
function change(files){
var nLen = files.length,nFile,nBytes=0,sOut='',middleSize;
for(var i=0;i<nLen;i++){
nFile=files[i];
nBytes+=nFile.size;
}
sOut=nBytes+"bytes";
for(var unitIndex=0,units=["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"],middleSize=nBytes;middleSize/=1000,middleSize>1;unitIndex++){
sOut=middleSize.toFixed(3)+units[unitIndex]+"("+nBytes+"byte"+")";
}
pElement.innerHTML='size:'+sOut;
}
//监听拖拽事件
fileInputElement.addEventListener('dragenter',dragEnter,false);
fileInputElement.addEventListener('dragover',dragOver,false);
fileInputElement.addEventListener('drop',drop,false);
function dragEnter(e){
e.stopPropagation();
e.preventDefault();
}
function dragOver(e){
e.stopPropagation();
e.preventDefault();
}
function drop(e){
e.stopPropagation();
e.preventDefault();
var dt=e.dataTransfer;
var files=dt.files;
change(files);
}
</script>
</body>
</html>本文转载于:猿2048➱https://www.mk2048.com/blog/blog.php?id=ha2jkc20icb