new FileReader()

一、调用FileReader对象的方法

方法名参数描述
abort none 中断读取
readAsBinaryString file 将文件读取为二进制码
readAsDataURL file 将文件读取为 DataURL
readAsText file, [encoding] 将文件读取为文本

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。

二、处理事件
事件描述
onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发，无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>

<body>
    <input type="file" id="upload-file">   
    <progress id="Progress" value="0" max="100"></progress>
    <input type="file" name="file" onchange="showPreview(this)" />
    <img id="portrait" src="" width="70" height="75">
    <script>
        // 用户选择图片进行上传
        // 上传成功, 后台返回图片的URL
        // 显示在当前页面上
        document.getElementById("upload-file").addEventListener("change", function () {
            for (var i = 0; i < this.files.length; i++) {
                var file = this.files[i];
                var reader = new FileReader();
                reader.onload = function (ev) {
                    console.log(ev);
                    console.log(ev.target.result);
                    var base64Str = ev.target.result.split(",")[1];
                    //console.log(base64Str)
                    $.ajax({
                        url: "reImg.php",
                        data: {
                            "base64file": base64Str
                        },
                        type: "post",
                        success: function (res) {
                            createImg(res);
                        }
                    })
                }
                reader.readAsDataURL(file);
            }
        });

        function createImg(imgSrc) {
            var theImg = document.createElement("img");
            theImg.src = imgSrc;
            document.body.appendChild(theImg);
            theImg.className = "imgC";
        }
        function showPreview(source) {
            console.log(source.files);
            var file = source.files[0];
            console.log(file);
            if (window.FileReader) {
                var fr = new FileReader();
                fr.onloadend = function (e) {
                    //                console.log(this.result); base64
                    document.getElementById("portrait").src = e.target.result;
                };
                //给FileReader对象一个读取完成的方法,使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里,img通过加载这个地址,完成图片的加载
                fr.readAsDataURL(file);
            }
            var total = source.files[0].size;
            fr.onprogress = function (ev) {
              
                console.log(
                    total
                );
                console.log(
                    ev.loaded
                );
                console.log(ev.loaded / total);
                var loading = (ev.loaded / total) * 100;
                document.getElementById("Progress").value = loading;
            }
        }
    </script>
</body>

</html>