FileReader

當開發上傳模塊的時候，須要用到input file，能夠設置對應的accept類型來限制上傳的文件

<p>Show .xls, .xlsx, .csv files...</p>
<input type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" ID="fileSelect" runat="server" />  


<p>Only show Excel (.xlsx) files...</p>
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ID="fileSelect" runat="server" />  

<p>Only show Excel (.xls) files...</p>
<input type="file" accept="application/vnd.ms-excel" ID="fileSelect" runat="server" />  


<p>Only show image files...</p>
<input type="file" accept="image/*" ID="fileSelect" runat="server" />  


<p>Only show text files...</p>
<input type="file" accept="text/plain" ID="fileSelect" runat="server" />  

<p>Only show html files...</p>
<input type="file" accept="text/html" ID="fileSelect" runat="server" />  

<p>Only show video files...</p>
<input type="file" accept="video/*" ID="fileSelect" runat="server" />  

<p>Only show audio files...</p>
<input type="file" accept="audio/*" ID="fileSelect" runat="server" />  

<p>Only show .WAV files...</p>
<input type="file" accept=".wav" ID="fileSelect" runat="server" />  

<p>Only show .PDF files...</p>
<input type="file" accept=".pdf" ID="fileSelect" runat="server" />

---

基本結構

<input type="file" name="" id="file" multiple="multiple" onchange="upload(event)">
    <script type="text/javascript">
    function upload(event){
        console.log(event.target.files);//獲取上傳文件
        var file = event.target.files[0];//獲取上傳的文件的第一張
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=function(event){
            console.log(event.target.result);//result屬於存儲最後的結果數據
        }
    }
    </script>

開始正文：
FileReader 一般用來讀取文件或則二進制存儲對象blob的內容

直接new FileReader()就能夠

實例屬性有：
error 只讀

function upload(event){
            var input = event.target.files[0];
            var reader = new FileReader();
            reader.onloadstart = function(){
                reader.abort();
            }
            reader.onloadend=function(){
                console.log(reader.error.message); //輸出錯誤信息
            }
            reader.readAsDataURL(input);

        }

方法：
readAsArrayBuffer Begins reading from blob as an ArrayBuffer.
readAsDataURL：Begins reading from blob as a 'data:' url string.
readAsText：Begins reading from blob as a string.

事件：
onloadstart onloadstart
onprogress Called during a read operation to report the current progress.
onload Called when a read operation successfully completes.
onabort Called when the read is aborted with abort().
onerror Called when there is an error during the load.
onloadend Called after a read completes (either successfully or unsuccessfully).

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>


--------


<script type="text/javascript">
        function upload(event){
            var input = event.target.files[0];
            var reader = new FileReader();
            reader.onprogress= function(e){
                console.log(e);
            }
            reader.readAsDataURL(input);
        }
    </script>

上傳進度條：

<p class="progress-bar"></p>
    <script type="text/javascript">
        function upload(event){
            var input = event.target.files[0];
            var reader = new FileReader();
            // reader.onprogress= function(e){
            //  console.log(e);
            // }
            reader.onprogress = function(data) {   //該事件在上傳過程當中，會一直重複執行，直到上傳結束爲止，不要使用setInterval來控制
            if (data.lengthComputable) {  //獲取數據的總長度
                var progress = parseInt( ((data.loaded / data.total) * 100), 10 );
                document.querySelector('.progress-bar').innerHTML=progress+'%';
            }
        }
            reader.readAsDataURL(input);
        }
    </script>

Reference:
https://developer.mozilla.org/en-US/docs/Web/API/FileReader
https://www.javascripture.com/FileReader