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