HTML5-新增API-文件读取上传

简单来说，上传问价加读取文件分为三步：

1、上传我们的文件，借助于文件域的input
2、选择要上传的文件，进行读取
3、把读取的内容显示到页面中

首先对页面进行一下布局：

在页面上创建一个input和div，div是用来存储显示上传的文件的

	<input type="file">
    <div></div>

此时页面上面只有一个选择文件的按钮

接下来放上传的代码：

<script>
        //1、上传我们的文件，借助于文件域 input file
        var file=document.querySelector("input")
        var div=document.querySelector("div")
        // 当页面发生改变的时候，比如上传图片了
        //是一个集合对象，通过files就能找出我们上传的那个文件了（伪数组）
        file.onchange=function(){
            //不管是上传的什么文件都唱传到了this.files里面去了
            // console.log(this.files)
            //2、选择要的文件，进行读取fileReader文件里面的内容
            // 因为filereader是一个对象得提前new
            var reader=new FileReader()
       
            //rader.raderAsText(文件对象)
            // 读取this.files【0】文件里面的内容
            reader.readAsText(this.files[0])


            //3、把读取的内容显示到页面中
            //reader已经读取完毕了，而且读取的内容存放到了resuly里面
            reader.onload=function(){
                div.innerHTML=this.result
            }
        }
    </script>

此时，我们往页面上传一个记事本

页面上就立马显示出来记事本的内容啦~:

而且我们不仅可以显示出文字，因为Filereader对象包含了五个对象，我只是用了其中的一个，如果像读取别的的话，直接更改一下就好啦~

readAsBinaryString 将文件数据读取为二进制数据字符串
readAsText 将文件数据读取为文本数据
readAsDataURL 图像路径
readArrayBuffer
abort 中断