new FileReader 的使用

1：FileReader : 读取文件内容

readAsText() 读取文本文件，(可以使用Txt打开的文件) readAsBinaryString(): 读取任意类型的文件，返回二进制字符串 readAsDataURL: 方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片、excel文件)内嵌在网页之中，不用放到外部文件 abort: 中断读取

2：FileReader 提供一个完整的事件模型，用来捕获读取文件的状态

onabort:读取文件断片时触发 onerror:读取文件错误时触发 onload:文件读取成功时触发 onloadend:文件读取完毕之后，不管成功还是失败触发 onloadstart: 开始读取文件时触发 onprogress:读取文件过程中触发

3. 前端图片数据加载显示

<progress id="Progress" value="0" max="100"></progress>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

function showPreview(source) {
        var file = source.files[0];
        console.log(file);
        if(window.FileReader) {
            var fr = new FileReader();
            fr.onloadend = function(e) {
//                console.log(this.result);
                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) {
            // 简单测试了一下 大概12M左右的传输速度
            // 推荐测试的时候用一个视频
            console.log(ev.loaded / total);
            var loading = (ev.loaded / total)*100;
            document.getElementById("Progress").value = loading;
        }
    }

4. base64与后台交互

前端代码

<input type="file" id="upload-file">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<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";
    }

后端代码

<?php
    // 接收前端传递过来的base64编码
    $base64Str = $_POST["base64file"];

    // 利用方法解码
    $img = base64_decode($base64Str);

    // 然后把图片添加到img文件夹下, 图片名, 由当前毫秒数进行md5加密后的字符作为图片名
    $name = md5(microtime());
    $result = file_put_contents("img/".$name.".jpg", $img);
//    umask(0777);
    //正常存入的图片是没有可写权限的,加入具备最高权限
    chmod("img/".$name.".jpg",0777);
    // 然后判断如果添加成功, 把这张图片的URL返回给前端
    if ($result){
        $s = "http://localhost/BASE64/0301php/day6/uploadMore/";
        echo $s."img/".$name.".jpg";
    } else {
        echo "error";
    }
    
?>

参考： codeleading.com/article/820…