h5上傳圖片及預覽

    第一次做圖片上傳，記錄一些問題。

    1，圖片的base64編碼就是可以將一副圖片數據編碼成一串字符串，使用該字符串代替圖像地址。而網頁上的每一個圖片，都是需要消耗一個http請求下載而來的，使用base64就不用請求http。

    2，上傳圖片：

<div id="ImgPr"></div>
<input class="click-upload" type="file" id="up" accept="image/*">

　  3，圖片轉base64（readAsDataURL方法用於讀取指定Blob或File的內容。當讀操作完成，readyState變為DONE, loadend被觸發，此時result屬性包含數據：URL以base64編碼的字符串表示文件的數據）：

function picUpload() {
    var preview = document.querySelector('img');
    var file = document.querySelector('input[type=file]').files[0];
    var reader = new FileReader();
        reader.onloadend = function () {
        preview.src = reader.result;
    }
    if (file) {
        reader.readAsDataURL(file);
    } else {
        preview.src = "";
    }
}

     4，壓縮圖片並轉base64（通過canvas把圖片進行大小壓縮）：

function picUpload(){
    var me=this;
    var img = new Image();
    $('#up').on('change',function(){
        var ViewWidth=$(this).width();
        var ViewHeight=$(this).height();
        var file = this.files[0];
        var URL = URL || webkitURL;
        img.src=URL.createObjectURL(file);
        img.onload = function(){
            var imgMe=this,
                imgWidth=0,
                imgHeight= 0,
                w = imgMe.width,
                h = imgMe.height,
                scale1 = w/ViewWidth,
                scale2 = h/ViewHeight;
            imgWidth=parseInt(Math.floor(w/scale1));
            imgHeight=parseInt(Math.floor(h/scale2));
            var canvas = document.createElement('canvas');
            var img = document.createElement('img');
            $('#ImgPr').html(img);   
            var ctx = canvas.getContext('2d');
            canvas.width = ViewWidth;
            canvas.height = ViewHeight;
            ctx.drawImage(imgMe,0,0,imgWidth,imgHeight);
            me.src=canvas.toDataURL('image/jpeg');
            $(img).prop("src",me.src);
        };
    });
};

　　5，$.ajax()方法里的data如果是字符串則不能用大括號括起來，這樣在有某些手機上會報錯。