移动端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;		}	}
实现结果：