h5上传图片及预览
第一次做图片上传，记录一些问题。
1，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。而网页上的每一个图片，都是需要消耗一个http请求下载而来的，使用base64就不用请求http。
2，上传图片：
1 <div id="ImgPr"></div> 2 <input class="click-upload" type="file" id="up" accept="image/*">
3，图片转base64（readAsDataURL方法用于读取指定Blob或File的内容。当读操作完成，readyState变为DONE, loadend被触发，此时result属性包含数据：URL以base64编码的字符串表示文件的数据）：
1 function picUpload() { 2 var preview = document.querySelector('img'); 3 var file = document.querySelector('input[type=file]').files[0]; 4 var reader = new FileReader(); 5 reader.onloadend = function () { 6 preview.src = reader.result; 7 } 8 if (file) { 9 reader.readAsDataURL(file); 10 } else { 11 preview.src = ""; 12 } 13 }
4，压缩图片并转base64（通过canvas把图片进行大小压缩）：
1 function picUpload(){ 2 var me=this; 3 var img = new Image(); 4 $('#up').on('change',function(){ 5 var ViewWidth=$(this).width(); 6 var ViewHeight=$(this).height(); 7 var file = this.files[0]; 8 var URL = URL || webkitURL; 9 img.src=URL.createObjectURL(file); 10 img.onload = function(){ 11 var imgMe=this, 12 imgWidth=0, 13 imgHeight= 0, 14 w = imgMe.width, 15 h = imgMe.height, 16 scale1 = w/ViewWidth, 17 scale2 = h/ViewHeight; 18 imgWidth=parseInt(Math.floor(w/scale1)); 19 imgHeight=parseInt(Math.floor(h/scale2)); 20 var canvas = document.createElement('canvas'); 21 var img = document.createElement('img'); 22 $('#ImgPr').html(img); 23 var ctx = canvas.getContext('2d'); 24 canvas.width = ViewWidth; 25 canvas.height = ViewHeight; 26 ctx.drawImage(imgMe,0,0,imgWidth,imgHeight); 27 me.src=canvas.toDataURL('image/jpeg'); 28 $(img).prop("src",me.src); 29 }; 30 }); 31 };
5，$.ajax()方法里的data如果是字符串则不能用大括号括起来，这样在有某些手机上会报错。
