第一次做图片上传,记录一些问题。
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如果是字符串则不能用大括号括起来,这样在有某些手机上会报错。
更多专业前端知识,请上 【猿2048】www.mk2048.com