移動端html5多圖上傳并壓縮實現

2024-04-27 15:03:48

字體：大中小

來源：轉載

供稿：網友

參考：https://my.oschina.net/swingcoder/blog/682357

demo：http://mhbseal.com/demo/html5/html5ImgComPRess/demo/index.html

簡單說明：關鍵代碼，就是利用html5的canvas重繪圖片，指定質量和尺寸達到在前端壓縮后再上傳的目的。 base64編碼，并上傳到后臺，再轉換成file格式，保存到服務器

前端代碼：

<!DOCTYPE html><html><head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>活動反饋</title>  <link rel="stylesheet" href="__TMPL__Publish/Wx/CSS/public.css" type="text/css"/>  <link rel="stylesheet" href="__TMPL__Publish/Wx/css/tickling.css" type="text/css"/>  <script src="__TMPL__Publish/Wx/js/jquery-1.11.1.min.js"></script>  <script src="__TMPL__Publish/Wx/js/html5ImgCompress.min.js"></script>      <script src="__PUBLIC__/js/mui.min.js"></script></head><body><div class="main">      <form class="mark_form" method="post" action="{:U('Wx/tickling_post')}" enctype="multipart/form-data">  <input type="hidden" id="tupian" name="tupian" value=""/>   <div class="mark_content">      <textarea class="content" name="content" placeholder="說說活動開展的情況吧"></textarea>   </div>      <ul class="mark_img">      <li class="mark_img_li tone">        <input type="button" class="btn"/>                <input type="file" multiple name="cover[]"  id="multiple" value=""/>      </li>                          </ul>     <!--<div class="mark_img">         </div>-->    <div class="clear"></div>      <div class="tijiao">提交</div>      </form></div><div id="box"></div></body><script>var act_id="{$id}";var sh;	function skip()	{		var url="{:U('Wx/sign_record')}";		location.href=url+'&id='+act_id;				clearInterval(sh);	}	 var arr=[];   var j = 1;  $(function () {	      // 多張    $('#multiple').on('change', function (e) {      var        i = 0,        files = e.target.files,		        len = files.length,        notSupport = false;		      // 循環多張圖片，需要for循環和notSupport變量支持（檢測）      for (; i < len; i++) {		  		  if(!/image///w+/.test(files[i].type)){			  					mui.toast("請確保文件為圖像類型");										return false;    				}				        if (!notSupport) {          (function(i) {            new html5ImgCompress(files[i], {              before: function(file) {                console.log('多張: ' + i + ' 壓縮前...');              },              done: function (file, base64) { // 這里是異步回調，done中i的順序不能保證                console.log('多張: ' + i + ' 壓縮成功...');                //insertImg(file, j);		                insertImg(base64, j++);              },              fail: function(file) {                console.log('多張: ' + i + ' 壓縮失敗...');              },              complate: function(file) {                console.log('多張: ' + i + ' 壓縮完成...');              },              notSupport: function(file) {                notSupport = true;                alert('瀏覽器不支持！');              }            });          })(i);        }      }    })		$(".tijiao").bind("click",function(){		$(this).text("正在上傳，請耐心等候...");					$.Ajax({					type:"POST", 					url:"{:U('Wx/tickling_post')}",					dataType:"text", 					data:{"img":arr,"content":$(".content").val(),'act_id':act_id						},					cache : false,					success:function(msg){ 					 if(msg=="success")					 {						 mui.toast("反饋成功");						 sh=setInterval(skip,2000);						 					 }else					 {						 mui.toast(msg);					 }									},					  					error:function(msg)					{						mui.toast(msg);					}				}); 		    });  });  // html中插入圖片  function insertImg(file, j) {	  	  if(arr.length>=8)	  {		  mui.toast("上傳圖片最大上限為8張");return;	  }    var      img = new Image(),      src;      src = file;	  	  var li=$("<li class='mark_img_li'></li>");	  	            img.onload = function() {     	  $("<img src="+src+" width='100%' height='100%'/>").appendTo(li);	      };$(".tone").before(li);    img.src = src;	arr.push(src);    file = null; // 處理完后記得清緩存  };    </script></html>
后臺控制器：
	public function tickling_post()	{				if(!file_exists("./Uploads/Tickling/".date("Y-m",time()).'/'))		{			mkdir('./Uploads/Tickling/'.date("Y-m",time()).'/',0777);			chmod('./Uploads/Tickling/'.date("Y-m",time()).'/',0777);		}				if(IS_POST)		{			$flag=false;			$str="abcdefghijklmnopqrstuvwxyz";						$img=$_POST["img"];						$data['create_time']=date("Y-m-d H:i:s",time());			$data['contents']=$_POST['content'];			$data['act_id']=$_POST['act_id'];			$count=$this->official_feedback->where(array("act_id"=>$_POST['act_id']))->count();			$imgcount=$this->official_feedback_pics->where(array("act_id"=>$_POST['act_id']))->count();			if($count || $imgcount)			{				echo "您已反饋過無需重復反饋";exit;return;			}			if($this->official_feedback->add($data)!==false)			{				//用戶只評論不上傳圖片				if(count($img)==0)				{					echo "success";exit;				}				$date=date("Y-m",time());				foreach ($img as $v)				{					$num='';					for($i=0;$i<8;$i++)					{					$num.=$str[rand(0, 25)];					}																$url = explode(',',$v);											$imgname=time().$num.'.png';					$path='./Uploads/Tickling/'.$date.'/'.$imgname;				    $result=file_put_contents($path, base64_decode($url[1]));//返回的是字節數				    if($result<=0)				    {				    	$flag=true;				    }				    $data['pic_route']=$path;				    $res=$this->official_feedback_pics->add($data);				    $this->official_activity->where(array("id"=>$_POST['act_id']))->setField("act_status",4);				   				    				}				if($flag)				{					echo "部分圖片上傳失敗";exit;				}else				{					echo "success";exit;				}								}else 			{				echo "反饋失敗";exit;			}					}else 		{			echo "請求方式不正確";exit;		}	}
實現結果：