前端壓縮圖片以及php後端上傳
阿新 • • 發佈：2019-01-07
後端壓縮已經越來越不能滿足使用者的需求，尤其在前端日益發展的今天，前端壓縮勢在必行。以前由於一直沒有找到合適的前端壓縮的方法，一次放棄，一次次繞行，最終沒有繞過這道坎。接下來我們說一下前端壓縮還有上傳
1.引入js,index.js已上傳我的資源。
2.在頁面中如何呼叫index.js,來實現前端壓縮的效果。
上程式碼：
html：
<form method="post" action="{:U('Home/RegisterInfo/uploadzippic')}"> <input type="hidden" value="{$applicantid}" name="applicantid" /> <div class="photolist" > <div class="itemphoteo"> <img src="__TMPL__/img/num.jpg" id="list2_1"/> <input type="file" class="filebtn" id="file_Id1" capture="camera" accept="image/*" name="fileimg[]" onchange="previewImage(this,'list2_1');piczip(this.id,event)"/> <input type="text" id="1" name="fileimg3_1"/> </div> <div class="itemphoteo"> <img src="__TMPL__/img/num.jpg" id="list2_2"/> <input type="file" class="filebtn" id="file_Id2" capture="camera" accept="image/*" name="fileimg[]" onchange="previewImage(this,'list2_2');piczip(this.id,event)"/> <input type="text" id="2" name="fileimg3_2"/> </div> <div class="itemphoteo"> <img src="__TMPL__/img/num.jpg" id="list2_3"/> <input type="file" class="filebtn" id="file_Id3" capture="camera" accept="image/*" name="fileimg[]" onchange="previewImage(this,'list2_3');piczip(this.id,event)"/> <input type="text" id="3" name="fileimg3_3"/> </div> <div class="itemphoteo"> <img src="__TMPL__/img/num.jpg" id="list2_4"/> <input type="file" class="filebtn" id="file_Id4" capture="camera" accept="image/*" name="fileimg[]" onchange="previewImage(this,'list2_4');piczip(this.id,event)"/> <input type="text" id="4" name="fileimg3_4"/> </div> <div class="itemphoteo"> <img src="__TMPL__/img/num.jpg" id="list2_5"/> <input type="file" class="filebtn" id="file_Id5" capture="camera" accept="image/*" name="fileimg[]" onchange="previewImage(this,'list2_5');piczip(this.id,event)"/> <input type="text" id="5" name="fileimg3_5"/> </div> </div> <input type="submit" value="提交" class="btnok"/> </form>
js程式碼：
<script src="__TMPL__/js/index.js"></script> <script type="text/javascript"> function piczip(fileId,e){ // var formData = new FormData(), var oFile = $('#'+fileId)[0].files[0], imgSize = oFile.size, inputid=fileId.substr(7,1); // document.getElementById(fileId).onclick=function(){ // console.log(inputid); // } // alert(inputid); if(imgSize < 256 * 1024){ // console.log($("#list2_"+inputid).attr("src")); // document.getElementById(inputid).value=$("#list2_"+inputid).attr("src"); imgChange(e,inputid,fileId); } else { // 圖片壓縮處理 // alert("2222"); var reader = new FileReader(), maxWidth = 400, maxHeight= 400, suffix = oFile.name.substring(oFile.name.lastIndexOf('.') + 1); if(imgSize > 2 * 1024 * 1024){ //alert("3333"); maxWidth = 800; maxHeight= 800; } reader.onload = function(e) { var base64Img= e.target.result; // alert(base64Img); // console.log(base64Img); // console.log(base64Img.length); //--執行resize。 var _ir=ImageResizer({ resizeMode:"auto", dataSource:base64Img, dataSourceType:"base64", maxWidth:maxWidth, //允許的最大寬度 maxHeight:maxHeight, //允許的最大高度。 onTmpImgGenerate:function(img){ }, success:function(resizeImgBase64,canvas){ // var blob = dataURLtoBlob(resizeImgBase64); // formData.append(fileId, blob, oFile['name']); // alert(blob); // uploadPic(formData, picNum); console.log(resizeImgBase64); console.log(resizeImgBase64.length); // alert(inputid); if(resizeImgBase64){ document.getElementById(inputid).value=resizeImgBase64;} //console.log(document.getElementById(inputid).value); } }); // alert(base64Img); }; reader.readAsDataURL(oFile); //alert(imgSize); } } function imgChange(e,inputid,fileId) { console.info(e.target.files[0]);//圖片檔案 var dom =$('#'+fileId)[0].files[0]; console.info(dom.value);//這個是檔案的路徑 C:\fakepath\icon (5).png console.log(e.target.value);//這個也是檔案的路徑和上面的dom.value是一樣的 var reader = new FileReader(); reader.onload = (function (file) { return function (e) { console.info(this.result); //這個就是base64的資料了 // var sss=$("#showImage"); // $("#showImage")[0].src=this.result; document.getElementById(inputid).value=this.result; }; })(e.target.files[0]); reader.readAsDataURL(e.target.files[0]); } </script>
此時，前端壓縮就已經成功了。會將壓縮過後的圖片base64格式編碼賦值在隱藏為文字域當中，提交表單的方式提交php來處理
接下來，我們在後臺如何處理這些提交過來的base64格式的字串，如何將他儲存到伺服器當中，然後將路徑存入資料庫
php 程式碼：
public function uploadzippic(){ $applicantid=I('applicantid'); $where['applicantid']=$applicantid; $data['fileimg3_1'] = I('fileimg3_1'); $data['fileimg3_2'] =I('fileimg3_2'); $data['fileimg3_3'] =I('fileimg3_3'); $data['fileimg3_4'] =I('fileimg3_4'); $data['fileimg3_5'] =I('fileimg3_5'); $file_path="./Public/Imagessm/".date('Y-m-d H:i:s').uniqid()."/"; foreach($data as $k=>$v){ if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $v, $result)){ //var_dump($result); $type = $result[2]; $new_file = "./Public/Imagessm/"; if(!file_exists($new_file)) { //var_dump(111111); //檢查是否有該資料夾，如果沒有就建立，並給予最高許可權 mkdir($new_file, 0700); } $new_file = $new_file.uniqid().".{$type}"; if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $v)))){ //echo '新檔案儲存成功：', $new_file; $new_file=substr($new_file, 1); $cate[$k]=$new_file; M('applicant_info')->where($where)->save($cate); }else{ echo '新檔案儲存失敗';die; } } } $this -> redirect('Home/RegisterInfo/agreem', array('applicantid' => $applicantid)); }
此時，就是大功告成，我們已將base64格式的字串轉成圖片檔案，並存入伺服器當中，並且圖片路徑存入資料庫，以便隨時調取。