《前端压缩图片以及php后端上传.pdf》由会员分享，可在线阅读，更多相关《前端压缩图片以及php后端上传.pdf（7页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、前端压缩图片以及php后端上传后端压缩已经越来越不能满足用户的需求，尤其在前端日益发展的今天，前端压缩势在必行。以前由千一直没有找到合适的前端压缩的方法，一次放弃，一次次绕行，最终没有绕过这道坎。接下来我们说一下前端压缩还有上传l引入js,indexjs已上传我的资源。2在页面中如何调用indexjs，来实现前端压缩的效果。上代码：html:htnview plain copy 1.2.3.4.5.6.012 789111 13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.js代码：html view plain co
2、py 1.2.3.4.function pie zip(fileid,e)5.6.7.8.9.10.11.12./13.II 14./15.16.17.18./var formData=new FormData(),var oFile=$(#+fileid)0.files0,imgSize=oFile.size,inputid于ileid.substr(7,1);document.getElementByld(file Id).onclick=function()console.log(inputid);/alert(inputid);if(imgSize 2*1024*1024)/alert
3、(3333);maxWidth=800;maxHeight=800;36.37.38.39./40.II 41.42.43.44.45.46.47.48.49.50.51.52.53.54.II 55.56.reader.onload=function(e)var base64Img=e.target.result;/alert(base64Img);console.log(base64Img);console.log(base64Img.length);II-执行resize。var _ir=ImageResizer(resizeMode:auto,datasource:base64Img,
4、dataSourceType:base64,maxWidth:maxWidth,I允许的最大宽度maxHeight:maxHeight,I允许的砓大商度。onTmpimgGenerate:function(img),success：于unction(resizeimgBase64,canvas)II var blob=dataURLtoBlob(resizeimgBase64);II formData.append(fileid,blob,oFilename);I I alert(blob);uploadPic(formData,picNum);console.log(resizeimgBas
5、e64);console.log(resizeimgBase64.length);57.58.59.60./alert(inputid);if(resizeimgBase64)document.getElementByid(inputid).value=resizelmgBase64;61.62./console.log(docurnent.getElementByid(inputid).val ue);63.64.65.66.II );alert(base64Img);67.68.69.70.;71.reader.readAsDataURL(oFile);72.I/alert(imgSize
6、);73.74.75.76.77.78.function imgChange(e,inputid,fileid)79.console.info(e.target.files 0);图片文件80.var dom=$(#+fileid)0.files0;81.console.info(dom.value)；这个是文件的路径C:fakepathicon(5).png 82.console.log(e.target.value)；这个也是文件的路径和上面的dom.value是一样的83.var reader=new FileReader();84.reader.on load=(function（于i
7、le)85.return function(e)86.console.info(this.result);这个就是base64的数据了87.II var sss=$(#showimage);88.I I$(#showimage)0.src=thi s.result;89.90.document.getElementByid(inputid).value=this.result;91.;92.)(e.target.files0);93.reader.readAsDataURL(e.target.files 0);94.95.此时，前端压缩就已经成功了。会将压缩过后的图片base64格式编码赋值在
8、隐截为文本域当中，提交表单的方式提交php来处理接下来，我们在后台如何处理这些提交过来的base64格式的字符串，如何将他存储到服务器当中，然后将路径存入数据库php代码：htn view plain copy 1.public function uploadzippic()2.$applicantid=I(applicantid);3.$where applicant id=$applicantid;4.$data fileimg3_1=I(fileimg3_1);5.$data fileimg3_2=I(fileimg3_2);6.$data fileimg3_3=I(fileimg3_3
9、);7.$datafileimg3_4=I(fileimg3_4);8.$data fileimg3_5=I(fileimg3_5);9.$file_path=./Public/Imagessm/.date(Y-m-d H:i:s).uniqid().J,/,10.11.foreach($data as$k;$v)if(preg_match(/(data:s*image/(w+);base64,)/,$v,$result)12.13.14.15.16.17.18.19.20./var_dump($result);$type$result2;$new_file=./Public/Imagessm
10、/;if(!file_exists($new_file)/var _dump(llllll);/检查是否有该文件夹，如果没有就创建，并给予最高权限mkdir($new_file,0700);21.22.$new_file=$new_file.uniqid().$type.,23.24.25.26.27.28.29.30.31.32.33.34.if(file_put_contents($new_file,base64_decode(str_repla ce($resultl,$v)/echo新文件保存成功：,$new_file;$new_file=subst r($new_file,1);$cate$k=$new_file;M(applicant_info)-where($where)-save($cate);else echo新文件保存失败;die;35.$this-redirect(Home/Registerinfo/agreem,array(applicantid=$applicantid);36.37.38.39.此时，就是大功告成，我们已将base64格式的字符串转成图片文件，并存入服务器当中，并且图片路径存入数据库，以便随时调取。