原生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數組，而後建立爲圖片。