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