原生Js圖片上傳

上傳圖片通常用兩種格式：

base64，byte

----------------------------------------------------------------------------------------

byte上傳：

　　FileReader.readAsArrayBuffer//將file讀取為ArrayBuffer

base64上傳

　　FileReader.readAsDataUrl//將file讀取為Url。

----------------------------------------------------------------------------------------

                                      ====Byte上傳===

前端

　　

<input type="file" onchange="wl(event)" filetype="image/*"/>

Js

function FW(event)
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function(){
        var dataAF = reader.result;
        httpHelper({
            type:'post',
            async:'true',
            data:dataAF,
            success:function(){
                //上傳成功
            },
            error:function(){
                //上傳失敗
            }
        });
    };
    reader.readAsDataBuffer(input.files[0]);
};
function httpHelper(params) {
    var request;
    if(XMLHttpRequest)
        request=new XMLHttpRequest();
    else
        request=new ActiveXObject("Microsoft.XMLHTTP");
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            if (request.status == 200) {
                if (params.success)
                    params.success(request.responseText);
            }
            else if (parseInt(request.status / 100) == 4) {
                if (params.error)
                    params.error(request.responseText);
            }
        }
    }
    request.open(params.type, params.url, params.async);
    try {
        request.send(params.data||null);
    } catch (e) {
        if (params.error)
            params.error(request.responseText);
    }
}

后台直接從request的stream讀取，儲存為圖片就好了，圖片格式可以放到請求頭里。

----------------------------------------------------------------------

                          ======base64=======

又時讀取文件是圖片，讀取之后提供要瀏覽。這時需要把file讀取為Url，把Url上傳到服務器后需要對Url進行分解才能得到自己想要的圖片base64數據。

如果用get請求上傳圖片時，有些base64特殊字符會被轉義（=，+，-），此時需要在服務端還原。然后把base64解碼為byte數組，然后創建為圖片。