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

网络编程 2024/11/17 佚名

3 1 2

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <title>实名验证</title>
  <script type="text/javascript">
    /*
    三个参数
    file：一个是文件(类型是图片格式)，
    w：一个是文件压缩的后宽度，宽度越小，字节越小
    objDiv：一个是容器或者回调函数
    photoCompress()
     */
    function photoCompress(file,w,objDiv){
      var ready=new FileReader();
      /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
      ready.readAsDataURL(file);
      ready.onload=function(){
        var re=this.result;
        canvasDataURL(re,w,objDiv)
      }
    }
    function canvasDataURL(path, obj, callback){
      var img = new Image();
      img.src = path;
      img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
          h = that.height,
          scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7; // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
          quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
      }
    }
    /**
     * 将以base64的图片url数据转换为Blob
     * @param urlData
     * 用url方式表示的base64图片数据
     */
    function convertBase64UrlToBlob(urlData){
      var arr = urlData.split(','), mime = arr[0].match(/:(.*"uploadbtn")[0].value = '上传中...';
      document.getElementsByClassName("uploadbtn")[0].disabled=true; 
      var obj = document.getElementsByClassName("myfile");
      for(var i=0;i<2;i++){
        UploadFile(obj[i].files[0],'file'+i);
      }
    }
    function UploadFile(fileObj,filed){
      var shopid = document.getElementById('shopid').value;
      var adminid = document.getElementById('adminid').value;
      var url = "newshimingupload.php"; // 接收上传文件的后台地址 
      var form = new FormData(); // FormData 对象
      if(fileObj.size/1024 > 100) { //大于100k，进行压缩上传
        photoCompress(fileObj, {
          quality: 0.2
        }, function(base64Codes){
          //console.log("压缩后：" + base.length / 1024 + " " + base);
          var bl = convertBase64UrlToBlob(base64Codes);
          form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
          form.append("shopid", shopid); // 文件对象
          form.append("adminid", adminid); // 文件对象
          form.append("filed", filed); // 文件对象
          xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
          xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
          xhr.onload = uploadComplete; //请求完成
          xhr.onerror = uploadFailed; //请求失败
          // xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
          xhr.upload.onloadstart = function(){//上传开始执行方法
            ot = new Date().getTime();  //设置上传开始时间
            oloaded = 0;//设置上传开始时，以上传的文件大小为0
          };
          xhr.send(form); //开始上传，发送form数据
        });
      }else{ //小于等于1M 原图上传
        form.append("file", fileObj); // 文件对象
        form.append("shopid", shopid); // 文件对象
        form.append("adminid", adminid); // 文件对象
        form.append("filed", filed); // 文件对象
        xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
        xhr.open("post", url, false); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        xhr.onload = uploadComplete; //请求完成
        xhr.onerror = uploadFailed; //请求失败
        xhr.upload.onloadstart = function(){//上传开始执行方法
          ot = new Date().getTime();  //设置上传开始时间
          oloaded = 0;//设置上传开始时，以上传的文件大小为0
        };
        xhr.send(form); //开始上传，发送form数据
      }
    }
    //上传成功响应
    function uploadComplete(evt) {
      //服务断接收完文件返回的结果
      var data = JSON.parse(evt.target.responseText);
      console.log(data);
      if(data.status){
        alert(data.msg);
        if(data.msg == '门店照上传成功'){
          window.location.href = "/dd_admin/index.php";
        }
      }
    }
    //上传失败
    function uploadFailed(evt) {
      alert("网络不稳定，请重新上传！");
    }
  </script>
</head>
<body>
  <style type="text/css">
    .main{text-align: center;padding-top: 50px;}
    .main .myfile{margin-bottom: 15px;}
  </style>
<div class="main">
  营业执照：
  <input type="file" class="myfile" id="file1" name="file1" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
  门店照：
  <input type="file" class="myfile" id="file2" name="file2" accept="image/x-png, image/jpg, image/jpeg, image/gif"/><br>
  <input type="hidden" id="shopid" name="shopid" value="<" maxlength="15">
  <input type="hidden" id="adminid" name="adminid" value="<" maxlength="15">
  <input style="margin-top: 25px;" class="uploadbtn" type="button" onclick="uploadClick()" value="上传" /><br>
</div>
</body>
</html>
2、前端图片压缩后，请求到自定义的接口upload_deal.php.代码如下
<"/";
    $pre = rand(999,9999).time();
    $ext = strrchr($file,'.');
    $newName = $pre.$ext;
    $out = array(
      'msg'=>'',
      'status'=>'error',
      'img_url'=>''
    );
    if(!is_dir($folder))
    {
      if(!mkdir($folder, 0777, true)){
        $out['msg'] = '图片目录创建失败！';
        echo json_encode($out);
        exit;
      }
    }
    $im = $_FILES[$filename]['tmp_name']; //上传图片资源
    $maxwidth="1056"; //设置图片的最大宽度
    $maxheight="500"; //设置图片的最大高度
    $imgname = $folder.$newName; //图片存放路径 根据自己图片路径而定
    $filetype=$_FILES[$filename]['type'];//图片类型
    $result = thumbImage($im,$maxwidth,$maxheight,$imgname,$filetype);
    if($result){
      $out['msg'] = '图片上传成功';
      $out['status'] = 'success';
      $out['img_url'] = $folder.$newName;
    }else{
      $out['msg'] = '图片上传失败';
    }
    return json_encode($out);
    exit;
  }
  //压缩图片
  function thumbImage($im,$maxwidth,$maxheight,$name,$filetype)
  {
    switch ($filetype) {   
      case 'image/pjpeg':   
      case 'image/jpeg':   
        $im = imagecreatefromjpeg($im);  //PHP图片处理系统函数
        break;   
      case 'image/gif':   
        $im = imagecreatefromgif($im);  
        break;   
      case 'image/png':   
        $im = imagecreatefrompng($im);  
        break;
      case 'image/wbmp':   
        $im = imagecreatefromwbmp($im);  
        break;       
    } 
    $resizewidth_tag = $resizeheight_tag = false;
    $pic_width = imagesx($im);
    $pic_height = imagesy($im);
    if(($maxwidth && $pic_width > $maxwidth) || ($maxheight && $pic_height > $maxheight))
    {
  $resizewidth_tag = $resizeheight_tag = false;
      if($maxwidth && $pic_width>$maxwidth)
      {
        $widthratio = $maxwidth / $pic_width;
        $resizewidth_tag = true;
      }
      if($maxheight && $pic_height>$maxheight)
      {
        $heightratio = $maxheight / $pic_height;
        $resizeheight_tag = true;
      }
      if($resizewidth_tag && $resizeheight_tag)
      {
        if($widthratio < $heightratio)
         $ratio = $widthratio;
        else
         $ratio = $heightratio;
      }
      if($resizewidth_tag && !$resizeheight_tag)
      $ratio = $widthratio;
      if($resizeheight_tag && !$resizewidth_tag)
      $ratio = $heightratio;
      $newwidth = $pic_width * $ratio;
      $newheight = $pic_height * $ratio;
      if(function_exists("imagecopyresampled"))
      {
        $newim = imagecreatetruecolor($newwidth,$newheight);//PHP图片处理系统函数
        imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP图片处理系统函数
      }
      else
      {
        $newim = imagecreate($newwidth,$newheight);
        imagecopyresized($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);
      }
      switch ($filetype) {   
        case 'image/pjpeg' :   
        case 'image/jpeg' :   
          $result = imagejpeg($newim,$name);  
          break;   
        case 'image/gif' :   
          $result = imagegif($newim,$name);  
          break;   
        case 'image/png' :   
          $result = imagepng($newim,$name);  
          break;
        case 'image/wbmp' :   
          $result = imagewbmp($newim,$name);  
          break;       
      } 
      imagedestroy($newim);
    }
    else
    {
      switch ($filetype) {   
        case 'image/pjpeg' :   
        case 'image/jpeg' :   
          $result = imagejpeg($im,$name);  
          break;   
        case 'image/gif' :   
          $result = imagegif($im,$name);  
          break;   
        case 'image/png' :   
          $result = imagepng($im,$name);  
          break;
        case 'image/wbmp' :   
          $result = imagewbmp($im,$name);  
          break;       
      }
    }
    return $result; 
  }

总结

以上所述是小编给大家介绍的php处理多图上传压缩代码功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

php多图上传代码,php上传压缩

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“php处理多图上传压缩代码功能”

暂无评论...

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

php中html_entity_decode实现HTML实体转义

Laravel框架使用Seeder实现自动填充数据功能

评论“php处理多图上传压缩代码功能”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接