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如果是字符串则不能用大括号括起来，这样在有某些手机上会报错。