一、調用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 讀取中

三、前端圖片數據加載顯示

<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;
        }
    }

四、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";
    }
    
?>

(完)