这个功能是支持多图上传的,一般手机拍张照也要在3M左右。我们来看具体怎么压缩吧!采用的weui框架代码。不清楚的可以weui/weui
<!--存放页面内容的dom节点-->
<div class="weui-cell__bd weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<!--图片存放区域-->
</ul>
<!--上传按钮-->
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple />
</div>
</div>
以下为具体的功能实现js
不会后端的到这里你的前端工作就完成了。// 图片数组 var imgarr=[]; // 点击添加图片 $("#uploaderInput").on("change",function () { //获取所选图片的列表对象 var fileimg=this.files; //查看已经选择的图片数量 var arrnum=imgarr.length; //获取所有图片的数量 var num=arrnum+fileimg.length; //我们这里是限制了三张 if(num>3){ //该处借用了layerjs的弹出层模块 layer.msg("最多上传三张图片"); return false; } //循环取出本次选择的图片 for(var i =0;i<fileimg.length;i++){ /*图片转Base64 核心代码*/ var file = fileimg[i]; //这里我们判断下类型如果不是图片就返回中断上传,也可以continue直接过滤掉该文件 if (!/image\/\w+/.test(file.type)) { layer.msg("请确保文件为图像类型"); return false; } //创建一个文件读取的工具类 var reader = new FileReader(); //这里利用了闭包的特性,来保留文件名 (function(x){ reader.onload = function (e) { //将读取到图片流直接拼接起来 var str='<li class="weui-uploader__file " style="background-image:url('+this.result+')"><span class="remove" style="color:red">X</span></li>'; //塞到页面节点里 $("#uploaderFiles").append(str); //调用压缩文件的方法,具体实现逻辑见下面 render(this.result,x); } })(file.name) //告诉文件读取工具类读取那个文件 reader.readAsDataURL(file); } }) //设置压缩图片的最大高度 var MAX_HEIGHT = 1000; function render(src,picname) { // 创建一个 Image 对象 var image = new Image(); // 绑定 load 事件处理器,加载完成后执行 image.onload = function() { // 获取 canvas DOM 对象 var canvas = document.createElement("canvas"); // 如果高度超标 if (image.height > MAX_HEIGHT && image.height >= image.width) { // 宽度等比例缩放 *= image.width *= MAX_HEIGHT / image.height; image.height = MAX_HEIGHT; } //考录到用户上传的有可能是横屏图片同样过滤下宽度的图片。 if (image.width > MAX_HEIGHT && image.width > image.height) { // 宽度等比例缩放 *= image.height *= MAX_HEIGHT / image.width; image.width = MAX_HEIGHT; } // 获取 canvas的 2d 画布对象, var ctx = canvas.getContext("2d"); // canvas清屏,并设置为上面宽高 ctx.clearRect(0, 0, canvas.width, canvas.height); // 重置canvas宽高 canvas.width = image.width; canvas.height = image.height; // 将图像绘制到canvas上 ctx.drawImage(image, 0, 0, image.width, image.height); // !!! 注意,image 没有加入到 dom之中 // document.getElementById('img').src = canvas.toDataURL("image/png"); var blob = canvas.toDataURL("image/jpeg"); //将转换结果放在要上传的图片数组里 imgarr.push({"pic":blob,"pic_name":picname}); }; image.src = src; }; //到这里我们图片压缩的代码就结束了。我们再加上,一个事件控制把需要上传的图片数组传给后台就行啦。 $.ajax({ "url":"", "type":"post" "dataType":"json", "data":{"pic":imgarr}, "success":function(res){} });
php后端代码如下
//php代码就不一一注释了,感兴趣的可以自己品读。 $arr = $_POST['pic']; // apiResponse("success",$arr); $pic_arr = array(); foreach ($arr as $k=>$v){ $pic = $v['pic']; $pic_name = $v['pic_name']; $temp = explode('.',$pic_name); $ext = uniqid().'.'.end($temp); $base64 = substr(strstr($pic, ","), 1); $image_res = base64_decode($base64); $pic_link = "Uploads/Shop/".date('Y-m-d').'/'.uniqid().'jpg'; $saveRoot = "Uploads/Shop/".date('Y-m-d').'/'; /**检查目录是否存在 循环创建目录*/ if(!is_dir($saveRoot)){ mkdir($saveRoot, 0777, true); } $res = file_put_contents($pic_link ,$image_res); if($res){ $pic_arr[] = $pic_link; }else{ apiResponse("error","图片上传失败!"); } } $string = implode(",",$pic_arr);