FileReader基础

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将被设置为DONE
FileReader.readAsArrayBuffer()读取Blob类型的数据，读取完成后返回ArrayBuffer对象，ArrayBuffer对象存储数据内容。
FileReader.readAsBinaryString()读取一个Blob对象，将Blob对象中的原始二进制数据作为字符串的形式返回。
FileReader.readAsDataURL()返回一个代表文件数据的URL
FileReader.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>