HTML5 FileReader的使用

    <!-- 实现即时预览 -->
    <form action="">
        <input type="file" name="myFile" id="myFile" multiple>
        <input type="submit" value="提交">
    </form>
    <img src="" alt="">
    <p></p>
    <script>
 
        //1.readAsText() 获取读取txt的文件 返回文本字符串，默认编码是UTF-8
        //2.readAsBinaryString()  读取获取二进制文件,一般用于获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储
        //3.readAsDataURL() 读取文件并转化为base64编码格式 作用在于不用请求服务器
        //abort()中断读取
        //选择文件后，文件存储于files数组里面 
        document.querySelector("#myFile").addEventListener("change", function() {
            var reader = new FileReader(); //创建对象读取文件
            var file = this.files;
            //readAsDataURL() 方法没有返回值 但是读取转换后的值会存储到result中
            reader.readAsDataURL(file[0]); //获取选择的第一个文件并转化为base64编码格式
              //文件对象事件
            //onload 读取成功触发
            //onloadend 读取完成触发
            //onerror 读取失败触发
            //onabort   读取中断触发
            //onloadstart 读取开始时触发
            //onprogress 读取文件中持续触发

            reader.onload = function() {
                console.log(reader.result);
                document.querySelector("img").src = reader.result;
            }
        })



        document.querySelector("#myFile").addEventListener("change", function() {
            var reader = new FileReader();
            reader.readAsText(this.files[1]);
            reader.onload = function() {
                document.querySelector("p").innerHTML = reader.result;
            }
        })
        </script>