当前位置：首页 > PHP教程 > php上传下载 > 列表

php处理多图上传压缩代码功能

发布:smiling　来源: PHP粉丝网 　添加日期：2021-09-27 10:10:11　浏览: 评论：0　

网上看了一些资料，关于处理图片压缩的，找到的大部分是单图压缩的，要么是单前端或者后端的，所以就自己整了下前后端压缩，并支持多图的压缩图片实例，代码有点多，直接复制到编辑器看会比较清楚。

1、先创建的一个简单的上传页面upload.php。先通过前端代码压缩图片，直接上代码

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> 
  6.   <title>实名验证</title> 
  7.   <script type="text/javascript"> 
  8.     /* 
  9.     三个参数 
  10.     file：一个是文件(类型是图片格式)， 
  11.     w：一个是文件压缩的后宽度，宽度越小，字节越小 
  12.     objDiv：一个是容器或者回调函数 
  13.     photoCompress() 
  14.      */ 
  15.     function photoCompress(file,w,objDiv){ 
  16.       var ready=new FileReader(); 
  17.       /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ 
  18.       ready.readAsDataURL(file); 
  19.       ready.onload=function(){ 
  20.         var re=this.result; 
  21.         canvasDataURL(re,w,objDiv) 
  22.       } 
  23.     } 
  24.     function canvasDataURL(path, obj, callback){ 
  25.       var img = new Image(); 
  26.       img.src = path; 
  27.       img.onload = function(){ 
  28.         var that = this; 
  29.         // 默认按比例压缩 
  30.         var w = that.width, 
  31.           h = that.height, 
  32.           scale = w / h; 
  33.         w = obj.width || w; 
  34.         h = obj.height || (w / scale); 
  35.         var quality = 0.7; // 默认图片质量为0.7 
  36.         //生成canvas 
  37.         var canvas = document.createElement('canvas'); 
  38.         var ctx = canvas.getContext('2d'); 
  39.         // 创建属性节点 
  40.         var anw = document.createAttribute("width"); 
  41.         anw.nodeValue = w; 
  42.         var anh = document.createAttribute("height"); 
  43.         anh.nodeValue = h; 
  44.         canvas.setAttributeNode(anw); 
  45.         canvas.setAttributeNode(anh); 
  46.         ctx.drawImage(that, 0, 0, w, h); 
  47.         // 图像质量 
  48.         if(obj.quality && obj.quality <= 1 && obj.quality > 0){ 
  49.           quality = obj.quality; 
  50.         } 
  51.         // quality值越小，所绘制出的图像越模糊 
  52.         var base64 = canvas.toDataURL('image/jpeg', quality); 
  53.         // 回调函数返回base64的值 
  54.         callback(base64); 
  55.       } 
  56.     } 
  57.     /** 
  58.      * 将以base64的图片url数据转换为Blob 
  59.      * @param urlData 
  60.      * 用url方式表示的base64图片数据 
  61.      */ 
  62.     function convertBase64UrlToBlob(urlData){ 
  63.       var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], 
  64.         bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
  65.       while(n--){ 
  66.         u8arr[n] = bstr.charCodeAt(n); 
  67.       } 
  68.       return new Blob([u8arr], {type:mime}); 
  69.     } 
  70.     var xhr; 
  71.     //上传文件方法 
  72.     function uploadClick() { 
  73.       document.getElementsByClassName("uploadbtn")[0].value = '上传中...'; 
  74.       document.getElementsByClassName("uploadbtn")[0].disabled=true;  
  75.       var obj = document.getElementsByClassName("myfile"); 
  76.       for(var i=0;i<2;i++){ 
  77.         UploadFile(obj[i].files[0],'file'+i); 
  78.       } 
  79.     } 
  80.     function UploadFile(fileObj,filed){ 
  81.       var shopid = document.getElementById('shopid').value; 
  82.       var adminid = document.getElementById('adminid').value; 
  83.       var url = "newshimingupload.php"; // 接收上传文件的后台地址  
  84.       var form = new FormData(); // FormData 对象 
  85.       if(fileObj.size/1024 > 100) { //大于100k，进行压缩上传 
  86.         photoCompress(fileObj, { 
  87.           quality: 0.2 
  88.         }, function(base64Codes){ 
  89.           //console.log("压缩后：" + base.length / 1024 + " " + base); 
  90.           var bl = convertBase64UrlToBlob(base64Codes); 
  91.           form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象 
  92.           form.append("shopid", shopid); // 文件对象 
  93.           form.append("adminid", adminid); // 文件对象 
  94.           form.append("filed", filed); // 文件对象 
  95.           xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 
  96.           xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。 
  97.           xhr.onload = uploadComplete; //请求完成 
  98.           xhr.onerror = uploadFailed; //请求失败 
  99.           // xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】 
  100.           xhr.upload.onloadstart = function(){//上传开始执行方法 
  101.             ot = new Date().getTime();  //设置上传开始时间 
  102.             oloaded = 0;//设置上传开始时，以上传的文件大小为0 
  103.           }; 
  104.           xhr.send(form); //开始上传，发送form数据 
  105.         }); 
  106.       }else{ //小于等于1M 原图上传 
  107.         form.append("file", fileObj); // 文件对象 
  108.         form.append("shopid", shopid); // 文件对象 
  109.         form.append("adminid", adminid); // 文件对象 
  110.         form.append("filed", filed); // 文件对象 
  111.         xhr = new XMLHttpRequest(); // XMLHttpRequest 对象 
  112.         xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。 
  113.         xhr.onload = uploadComplete; //请求完成 
  114.         xhr.onerror = uploadFailed; //请求失败 
  115.         xhr.upload.onloadstart = function(){//上传开始执行方法 
  116.           ot = new Date().getTime();  //设置上传开始时间 
  117.           oloaded = 0;//设置上传开始时，以上传的文件大小为0 
  118.         }; 
  119.         xhr.send(form); //开始上传，发送form数据 
  120.       } 
  121.     } 
  122.     //上传成功响应 
  123.     function uploadComplete(evt) { 
  124.       //服务断接收完文件返回的结果 
  125.       var data = JSON.parse(evt.target.responseText); 
  126.       console.log(data); 
  127.       if(data.status){ 
  128.         alert(data.msg); 
  129.         if(data.msg == '门店照上传成功'){ 
  130.           window.location.href = "/dd_admin/index.php"; 
  131.         } 
  132.       } 
  133.     } 
  134.     //上传失败 
  135.     function uploadFailed(evt) { 
  136.       alert("网络不稳定，请重新上传！"); 
  137.     } 
  138.   </script> 
  139. </head> 
  140. <body> 
  141.   <style type="text/css"> 
  142.     .main{text-align: center;padding-top: 50px;} 
  143.     .main .myfile{margin-bottom: 15px;} 
  144.   </style> 
  145. <div class="main"> 
  146.   营业执照： 
  147.   <input type="file" class="myfile" id="file1" name="file1" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br> 
  148.   门店照： 
  149.   <input type="file" class="myfile" id="file2" name="file2" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br> 
  150.   <input type="hidden" id="shopid" name="shopid" value="<?php echo $_GET['shopid']; ?>" maxlength="15"> 
  151.   <input type="hidden" id="adminid" name="adminid" value="<?php echo $_GET['adminid']; ?>" maxlength="15"> 
  152.   <input style="margin-top: 25px;" class="uploadbtn" type="button" onclick="uploadClick()" value="上传" /><br> 
  153. </div> 
  154. </body> 
  155. </html> 

2、前端图片压缩后，请求到自定义的接口upload_deal.php.代码如下

  1. <?php 
  2. require_once('public_func.php'); 
  3.   actionUpload('uploads/','file'); //参数分别代表图片存储的路径和上传的文件名 
  4. } 

3、在第二部引入public_func.php,这块代码主要是对后端处理图片压缩

  1. function actionUpload($path = '/uploads/',$filename='myFile') 
  2.   { 
  3.     // $path = 'uploads/';  //图片存放根目录 根据自己项目路径而定 
  4.     $file = $_FILES[$filename]['name']; 
  5.     $folder = $path.date('Ymd')."/"; 
  6.     $pre = rand(999,9999).time(); 
  7.     $ext = strrchr($file,'.'); 
  8.     $newName = $pre.$ext; 
  9.     $out = array( 
  10.       'msg'=>'', 
  11.       'status'=>'error', 
  12.       'img_url'=>'' 
  13.     ); 
  14.     if(!is_dir($folder)) 
  15.     { 
  16.       if(!mkdir($folder, 0777, true)){ 
  17.         $out['msg'] = '图片目录创建失败！'; 
  18.         echo json_encode($out); 
  19.         exit; 
  20.       } 
  21.     } 
  22.     $im = $_FILES[$filename]['tmp_name']; //上传图片资源 
  23.     $maxwidth="1056"; //设置图片的最大宽度 
  24.     $maxheight="500"; //设置图片的最大高度 
  25.     $imgname = $folder.$newName; //图片存放路径 根据自己图片路径而定 
  26.     $filetype=$_FILES[$filename]['type'];//图片类型 
  27.     $result = thumbImage($im,$maxwidth,$maxheight,$imgname,$filetype); 
  28.     if($result){ 
  29.       $out['msg'] = '图片上传成功'; 
  30.       $out['status'] = 'success'; 
  31.       $out['img_url'] = $folder.$newName; 
  32.     }else{ 
  33.       $out['msg'] = '图片上传失败'; 
  34.     } 
  35.     return json_encode($out); 
  36.     exit; 
  37.   } 
  38.   //压缩图片 
  39.   function thumbImage($im,$maxwidth,$maxheight,$name,$filetype) 
  40.   { 
  41.     switch ($filetype) {    
  42.       case 'image/pjpeg':    
  43.       case 'image/jpeg':    
  44.         $im = imagecreatefromjpeg($im);  //PHP图片处理系统函数 
  45.         break;    
  46.       case 'image/gif':    
  47.         $im = imagecreatefromgif($im);   
  48.         break;    
  49.       case 'image/png':    
  50.         $im = imagecreatefrompng($im);   
  51.         break; 
  52.       case 'image/wbmp':    
  53.         $im = imagecreatefromwbmp($im);   
  54.         break;        
  55.     }  
  56.     $resizewidth_tag = $resizeheight_tag = false; 
  57.     $pic_width = imagesx($im); 
  58.     $pic_height = imagesy($im); 
  59.     if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight)) 
  60.     { 
  61.   $resizewidth_tag = $resizeheight_tag = false; 
  62.       if($maxwidth && $pic_width>$maxwidth) 
  63.       { 
  64.         $widthratio = $maxwidth / $pic_width; 
  65.         $resizewidth_tag = true; 
  66.       } 
  67.       if($maxheight && $pic_height>$maxheight) 
  68.       { 
  69.         $heightratio = $maxheight / $pic_height; 
  70.         $resizeheight_tag = true; 
  71.       } 
  72.       if($resizewidth_tag && $resizeheight_tag) 
  73.       { 
  74.         if($widthratio < $heightratio) 
  75.          $ratio = $widthratio; 
  76.         else 
  77.          $ratio = $heightratio; 
  78.       } 
  79.       if($resizewidth_tag && !$resizeheight_tag) 
  80.       $ratio = $widthratio; 
  81.       if($resizeheight_tag && !$resizewidth_tag) 
  82.       $ratio = $heightratio; 
  83.       $newwidth = $pic_width * $ratio; 
  84.       $newheight = $pic_height * $ratio; 
  85.       if(function_exists("imagecopyresampled")) 
  86.       { 
  87.         $newim = imagecreatetruecolor($newwidth,$newheight);//PHP图片处理系统函数 
  88.         imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP图片处理系统函数 
  89.       } 
  90.       else 
  91.       { 
  92.         $newim = imagecreate($newwidth,$newheight); 
  93.         imagecopyresized($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height); 
  94.       } 
  95.       switch ($filetype) {    
  96.         case 'image/pjpeg' :    
  97.         case 'image/jpeg' :    
  98.           $result = imagejpeg($newim,$name);   
  99.           break;    
  100.         case 'image/gif' :    
  101.           $result = imagegif($newim,$name);   
  102.           break;    
  103.         case 'image/png' :    
  104.           $result = imagepng($newim,$name);   
  105.           break; 
  106.         case 'image/wbmp' :    
  107.           $result = imagewbmp($newim,$name);   
  108.           break;        
  109.       }  
  110.       imagedestroy($newim); 
  111.     } 
  112.     else 
  113.     { 
  114.       switch ($filetype) {    
  115.         case 'image/pjpeg' :    
  116.         case 'image/jpeg' :    
  117.           $result = imagejpeg($im,$name);   
  118.           break;    
  119.         case 'image/gif' :    
  120.           $result = imagegif($im,$name);   
  121.           break;    
  122.         case 'image/png' :    
  123.           $result = imagepng($im,$name);   
  124.           break; 
  125.         case 'image/wbmp' :    
  126.           $result = imagewbmp($im,$name);   
  127.           break;        
  128.       } 
  129.     } 
  130.     return $result;  
  131.   }

Tags: php多图上传压缩

分享到：

推荐文章

热门文章

最新评论文章