FileReader基本

2024年3月20日 203次阅读 来源: treeandgrass

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>
    原文作者：treeandgrass
    原文地址: https://segmentfault.com/a/1190000009624018
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞