FileReader基礎

時間 2019-11-10

標籤 filereader 基礎简体版

原文原文鏈接

FileReader語法

例子javascript

屬性

FileReader.error表示在讀文件操做過程當中發生的錯誤
FileReader.readyState表示FileReader讀取數據的狀態，有三個值：css

EMPTY：沒有數據被加載html
LOADING：數據正在被加載java
LOADING：數據正在被加載git

FileReader.result表明數據讀取完成後的結果，只有在數據被加載完成後，result屬性纔有效。github

事件

FileReader.onbort在FileReader的reading操做被中斷的時候觸發。
FileReader.onerror在FileReader讀取數據過程當中發生錯誤時觸發
FileReader.onload在FileReader讀取事件完成後調用
FileReader.onloadstart在FileReader讀取事件開始時調用
FileReader.onloadend在FileReader讀事件完成後調用
FileReader.onprogress在FileReader讀取數據的過程當中調用web

方法

FileReader.abort()中斷讀數據操做，直接返回，readyState將被設置爲DONE
FileReader.readAsArrayBuffer()讀取Blob類型的數據，讀取完成後返回ArrayBuffer對象，ArrayBuffer對象存儲數據內容。
FileReader.readAsBinaryString()讀取一個Blob對象，將Blob對象中的原始二進制數據做爲字符串的形式返回。
FileReader.readAsDataURL()返回一個表明文件數據的URL
FileReader.readAsTextString()讀取一個Blob對象，返回一個文本字符串。flex

Demo

一個拖拽事件的demo,參考MDNcode

<!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>

1. FileReader 基本介紹
2. fileReader
3. FileReader
4. fileReader()
5. Java基礎-簡單的字符流-FileReader,FileWriter
6. Java基礎-IO流對象之字符類（FileWrite與FileReader）
7. FileReader api
8. webApi FileReader
9. HTML5 FileReader
10. FileReader類
更多相關文章...
• Kotlin 基礎語法 - Kotlin 教程
• Scala 基礎語法 - Scala教程
• Kotlin學習（二）基本類型
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

filereader

基礎

filewriter&filereader

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。