原生JS實現異步圖片上傳（預覽）

時間 2019-11-08

原文原文鏈接

效果php

實現過程分爲兩步html

1. 用戶點擊添加後經過 H5文件讀取 FileReader對象以DataURL的格式讀取圖片ajax

2. 經過FormData對象生成表單數據，經過ajax上傳到後臺數組

HTML瀏覽器

<style>
    .file-box{display: inline-block;position: relative;padding: 3px 5px;overflow: hidden;color:#fff;background-color: #ccc;}
    .file-btn{position: absolute;width: 100%;height: 100%;top: 0;left: 0;outline: none;background-color: transparent;filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity: 0;opacity: 0;}
    .prev-box{display: inline-block; min-width: 200px;min-height: 120px;border-radius: 5px;padding: 5px;border:1px #ccc dotted;}
</style>
<body>
    <form id="form1">
        <div class="file-box">
            <input type="file" class="file-btn" onChange="uploadImg(this)" accept="image/*" name="image"/>
            上傳文件
        </div>
        <br>
        <div class="prev-box" id="prev-box">
            <img style="width: 200px;" id="img">
        </div>
        <div id="uploadMsg" style="color: #f00"></div>
    </form>
</body>

JS服務器

function uploadImg(obj){
    //1. 圖片預覽
    //若是瀏覽器不支持 FileReader 則用文字提示
    if(typeof FileReader == 'undefined'){
        var prevBox = document.getElementById('prev-box')
        prevBox.innerHTML = "瀏覽器不支持預覽"
    }else{
        //獲取上傳文件，返回 File對象
        var file = obj.files[0];
        var reader = new FileReader()
        //註冊讀取成功的回調函數
        reader.onload = function (e) {
            var img = document.getElementById("img");
            img.src = e.target.result;
        }
        //開始以 DataURL格式讀取文件
        reader.readAsDataURL(file)
    }

    //2. 圖片上傳
    if(typeof FormData == 'undefined'){
        alert('瀏覽器不支持圖片上傳')
    }else{
        var form = document.getElementById('form1')
        var data = new FormData(form)
        //添加自定義字段
        data.append("CustomField", "This is some extra data")
        //ajax請求
        var httpRequest = new XMLHttpRequest();
        httpRequest.open("POST", "upload.php", true);
        httpRequest.onload = function(oEvent) {
            if (httpRequest.status == 200) {
                //服務器返回的保存路徑
                console.log(httpRequest.responseText)
            } else {
                document.getElementById('uploadMsg').innerHTML = '圖片上傳失敗，錯誤碼:' + httpRequest.status
            }
        };
        httpRequest.send(data);
    }

}