前端压缩图片以及php后端上传

来源：互联网发布：多条update sql语句编辑：程序博客网时间：2024/05/19 21:18

后端压缩已经越来越不能满足用户的需求，尤其在前端日益发展的今天，前端压缩势在必行。以前由于一直没有找到合适的前端压缩的方法，一次放弃，一次次绕行，最终没有绕过这道坎。接下来我们说一下前端压缩还有上传

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格式的字符串转成图片文件，并存入服务器当中，并且图片路径存入数据库，以便随时调取。

2 0