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

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

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