h5上传图片及预览

2016-04-22

0

第一次做图片上传，记录一些问题。

1，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。而网页上的每一个图片，都是需要消耗一个http请求下载而来的，使用base64就不用请求http。

2，上传图片：1

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='/images/loading.gif' data-original=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='/images/loading.gif' data-original=canvas.toDataURL('image/jpeg');28 $(img).prop("src",me.src);29 };30 });31 };

5，$.ajax()方法里的data如果是字符串则不能用大括号括起来，这样在有某些手机上会报错。

0

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。