溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用php怎么實現(xiàn)多圖上傳壓縮代碼功能

發(fā)布時間：2021-05-22 16:24:53 來源：億速云 閱讀：160 作者：Leah 欄目：開發(fā)技術(shù)

使用php怎么實現(xiàn)多圖上傳壓縮代碼功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習下，希望你能有所收獲。

1、先創(chuàng)建的一個簡單的上傳頁面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">
    /*
    三個參數(shù)
    file：一個是文件(類型是圖片格式)，
    w：一個是文件壓縮的后寬度，寬度越小，字節(jié)越小
    objDiv：一個是容器或者回調(diào)函數(shù)
    photoCompress()
     */
    function photoCompress(file,w,objDiv){
      var ready=new FileReader();
      /*開始讀取指定的Blob對象或File對象中的內(nèi)容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設(shè)置了onloadend事件處理程序,則調(diào)用之.同時,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內(nèi)容.*/
      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; // 默認圖片質(zhì)量為0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 創(chuàng)建屬性節(jié)點
        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);
        // 圖像質(zhì)量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
          quality = obj.quality;
        }
        // quality值越小，所繪制出的圖像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回調(diào)函數(shù)返回base64的值
        callback(base64);
      }
    }
    /**
     * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob
     * @param urlData
     * 用url方式表示的base64圖片數(shù)據(jù)
     */
    function convertBase64UrlToBlob(urlData){
      var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      while(n--){
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type:mime});
    }
    var xhr;
    //上傳文件方法
    function uploadClick() {
      document.getElementsByClassName("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為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
          xhr.onload = uploadComplete; //請求完成
          xhr.onerror = uploadFailed; //請求失敗
          // xhr.upload.onprogress = progressFunction;//【上傳進度調(diào)用方法實現(xiàn)】
          xhr.upload.onloadstart = function(){//上傳開始執(zhí)行方法
            ot = new Date().getTime();  //設(shè)置上傳開始時間
            oloaded = 0;//設(shè)置上傳開始時，以上傳的文件大小為0
          };
          xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)
        });
      }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為服務(wù)器請求地址，true 該參數(shù)規(guī)定請求是否異步處理。
        xhr.onload = uploadComplete; //請求完成
        xhr.onerror = uploadFailed; //請求失敗
        xhr.upload.onloadstart = function(){//上傳開始執(zhí)行方法
          ot = new Date().getTime();  //設(shè)置上傳開始時間
          oloaded = 0;//設(shè)置上傳開始時，以上傳的文件大小為0
        };
        xhr.send(form); //開始上傳，發(fā)送form數(shù)據(jù)
      }
    }
    //上傳成功響應(yīng)
    function uploadComplete(evt) {
      //服務(wù)斷接收完文件返回的結(jié)果
      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("網(wǎng)絡(luò)不穩(wěn)定，請重新上傳！");
    }
  </script>
</head>
<body>
  <style type="text/css">
    .main{text-align: center;padding-top: 50px;}
    .main .myfile{margin-bottom: 15px;}
  </style>
<div class="main">
  營業(yè)執(zhí)照：
  <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="<?php echo $_GET['shopid']; ?>" maxlength="15">
  <input type="hidden" id="adminid" name="adminid" value="<?php echo $_GET['adminid']; ?>" maxlength="15">
  <input  class="uploadbtn" type="button" onclick="uploadClick()" value="上傳" /><br>
</div>
</body>
</html>
2、前端圖片壓縮后，請求到自定義的接口upload_deal.php.代碼如下
<?php
require_once('public_func.php');
  actionUpload('uploads/','file'); //參數(shù)分別代表圖片存儲的路徑和上傳的文件名
}
3、在第二部引入public_func.php,這塊代碼主要是對后端處理圖片壓縮
function actionUpload($path = '/uploads/',$filename='myFile')
  {
    // $path = 'uploads/';  //圖片存放根目錄 根據(jù)自己項目路徑而定
    $file = $_FILES[$filename]['name'];
    $folder = $path.date('Ymd')."/";
    $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'] = '圖片目錄創(chuàng)建失敗！';
        echo json_encode($out);
        exit;
      }
    }
    $im = $_FILES[$filename]['tmp_name']; //上傳圖片資源
    $maxwidth="1056"; //設(shè)置圖片的最大寬度
    $maxheight="500"; //設(shè)置圖片的最大高度
    $imgname = $folder.$newName; //圖片存放路徑 根據(jù)自己圖片路徑而定
    $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圖片處理系統(tǒng)函數(shù)
        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圖片處理系統(tǒng)函數(shù)
        imagecopyresampled($newim,$im,0,0,0,0,$newwidth,$newheight,$pic_width,$pic_height);//PHP圖片處理系統(tǒng)函數(shù)
      }
      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開發(fā)環(huán)境搭建工具有哪些

一、phpStudy，是一個新手入門最常用的開發(fā)環(huán)境。二、WampServer，WampServer也同樣的也是和phpStudy一樣操作簡單對小白比較友好。三、XAMPP，XAMPP（Apache+MySQL+PHP+PERL）是一個功能強大的建站集成軟件包；四、MAMP，MAMP分為兩種MAMP和MAMP Pro for Mac。五、寶塔面板，寶塔面板是一款服務(wù)器管理軟件，支持windows和linux系統(tǒng)。六、UPUPW，UPUPW是目前Windows平臺下最具特色的Web服務(wù)器PHP套件。

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

php
AI
助
手