移动端html5多图上传并压缩实现

最新推荐文章于 2024-08-19 12:13:33 发布

SunRise_2016

最新推荐文章于 2024-08-19 12:13:33 发布

阅读量1.2w

点赞数 2

分类专栏：网页设计

本文链接：https://blog.csdn.net/sunrise_2013/article/details/54848501

版权

网页设计专栏收录该内容

9 篇文章 0 订阅

订阅专栏

参考：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;
		}
	}

实现结果：