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

原标题：h5上传图片及预览

关键词：上传