你的位置:首页 > Java教程

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