《前端压缩图片以及php后端上传》由会员分享，可在线阅读，更多相关《前端压缩图片以及php后端上传（7页珍藏版）》请在金锄头文库上搜索。
1、 前端压缩图片以及前端压缩图片以及 phpphp 后端上传后端上传后端压缩已经越来越不能满足用户的需求，尤其在前端日益发展的今天，前端压缩势在必行。以前由于一直没有找到合适的前端压缩的方法，一次放弃，一次次绕行，最终没有绕过这道坎。接下来我们说一下前端压缩还有上传1.引入 js,index.js 已上传我的资源。2.在页面中如何调用 index.js,来实现前端压缩的效果。上代码：html：html view plain copy1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
2、24. 25. 26. 27. 28. 29. 30. 31. 32. 33. js 代码：html view plain copy1. 2. 3. 4. function piczip(fileId,e) 5. / var formData = new FormData(), 6. var oFile = $(#+fileId)0.files0, 7. imgSize = oFile.size, 8. 9. inputid=fileId.substr(7,1); 10. 11. 12./ document.getElementById(fileId).onclick=function() 1
3、3./ console.log(inputid); 14./ 15. / alert(inputid); 16. 17. if(imgSize 2 * 1024 * 1024) 31. /alert(“3333“); 32. maxWidth = 800; 33. maxHeight= 800; 34. 35. 36. reader.onload = function(e) 37. var base64Img= e.target.result; 38. / alert(base64Img); 39./ console.log(base64Img); 40./ console.log(base6
4、4Img.length); 41. /-执行 resize。 42. var _ir=ImageResizer( 43. resizeMode:“auto“, 44. dataSource:base64Img, 45. dataSourceType:“base64“, 46. maxWidth:maxWidth, /允许的最大宽度 47. maxHeight:maxHeight, /允许的最大高度。 48. onTmpImgGenerate:function(img) 49. , 50. success:function(resizeImgBase64,canvas) 51. / var bl
5、ob = dataURLtoBlob(resizeImgBase64); 52. / formData.append(fileId, blob, oFilename); 53. / alert(blob); 54./ uploadPic(formData, picNum); 55. console.log(resizeImgBase64); 56. console.log(resizeImgBase64.length); 57. 58. 59. / alert(inputid); 60. if(resizeImgBase64) document.getElementById(inputid).
6、value=resizeImgBase64; 61. 62. /console.log(document.getElementById(inputid).value); 63. 64. ); 65. 66./ alert(base64Img); 67. 68. 69. ; 70. 71. reader.readAsDataURL(oFile); 72. /alert(imgSize); 73. 74. 75. 76. 77. 78. function imgChange(e,inputid,fileId) 79. console.info(e.target.files0);/图片文件 80.
7、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.onload = (function (file) 85. return function (e) 86. console.info(this.result); /这个就是 base64 的数据了 87
8、./ var sss=$(“#showImage“); 88./ $(“#showImage“)0.src=this.result; 89. 90. document.getElementById(inputid).value=this.result; 91. ; 92. )(e.target.files0); 93. reader.readAsDataURL(e.target.files0); 94. 95. 此时，前端压缩就已经成功了。会将压缩过后的图片 base64 格式编码赋值在隐藏为文本域当中，提交表单的方式提交 php 来处理接下来，我们在后台如何处理这些提交过来的 base64
9、格式的字符串，如何将他存储到服务器当中，然后将路径存入数据库php 代码：html view plain copy1.public function uploadzippic() 2. $applicantid=I(applicantid); 3. $whereapplicantid=$applicantid; 4. $datafileimg3_1 = I(fileimg3_1); 5. $datafileimg3_2 =I(fileimg3_2); 6. $datafileimg3_3 =I(fileimg3_3); 7. $datafileimg3_4 =I(fileimg3_4); 8.
10、 $datafileimg3_5 =I(fileimg3_5); 9. $file_path=“./Public/Imagessm/“.date(Y-m-d H:i:s).uniqid().“/“; 10. foreach($data as $k=$v) 11. if (preg_match(/(data:s*image/(w+);base64,)/, $v, $result) 12. /var_dump($result); 13. $type = $result2; 14. 15. $new_file = “./Public/Imagessm/“; 16. if(!file_exists($new_file) 17. 18. /var_dump(111111); 19. /检查是否有该文件夹，如果没有就创建，并给予最高权限 20. mkdir($new_file, 0700); 21.
