FileReader基础

Posted homehtml

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了FileReader基础相关的知识,希望对你有一定的参考价值。

FileReader语法

例子

属性

FileReader.error表示在读文件操作过程中发生的错误
FileReader.readyState表示FileReader读取数据的状态,有三个值:

  • EMPTY:没有数据被加载

  • LOADING:数据正在被加载

  • LOADING:数据正在被加载

FileReader.result代表数据读取完成后的结果,只有在数据被加载完成后,result属性才有效。

事件

FileReader.onbortFileReaderreading操作被中断的时候触发。
FileReader.onerrorFileReader读取数据过程中发生错误时触发
FileReader.onloadFileReader读取事件完成后调用
FileReader.onloadstartFileReader读取事件开始时调用
FileReader.onloadendFileReader读事件完成后调用
FileReader.onprogressFileReader读取数据的过程中调用

方法

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>

本文转载于:猿2048?https://www.mk2048.com/blog/blog.php?id=ha2jkc20icb

以上是关于FileReader基础的主要内容,如果未能解决你的问题,请参考以下文章

[vscode]--HTML代码片段(基础版,reactvuejquery)

java基础之 IO 流(输入/出字符流)

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

阶段1 语言基础+高级_1-3-Java语言高级_08 转换流_2_编码引出的问题_FileReader读取GBK格式文件

[Go] 通过 17 个简短代码片段,切底弄懂 channel 基础