1.注册input file标签的onchange事件;
2.检查图片格式;
3.检查图片大小;
4.压缩图片
5.上传图片至服务器;
前端代码:
document.getElementById('img-file').addEventListener('change', function (event){ var that=this; var file = that.files[0]; if (file) { var rFilter = /^(image/jpeg|image/png|image/jpg)$/i; // 检查图片格式 if (!rFilter.test(file.type)) { alert("请选择jpeg、png、jpg格式的图片"); return; } } var fileSize = Math.round(that.files[0].size/1024/1024) ; //以M为单位 if(fileSize>3){ alert("请上传小于3M的图片"); return; } //压缩后上传 compress(event.target.files[0],fileSize,function(base64_data){ $.ajax({ type:'post', url:ApiUrl+'/index.php?act=sns_album&op=base64_upload', data:{key:key,imgBase64:base64_data}, dataType:'json', success: function(result){ callBack(result); } }); }); },true); function compress(res,fileSize,callBack) { //res代表上传的图片base64位,fileSize大小图片的大小 var img = new Image(); var maxW = 800; //设置最大宽度 img.onload = function () { var cvs = document.createElement('canvas'), ctx = cvs.getContext( '2d'); if(img.width > maxW) { img.height *= maxW / img.width; img.width = maxW; } cvs.width = img.width; cvs.height = img.height; ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.drawImage(img, 0, 0, img.width, img.height); var compressRate = getCompressRate(1,fileSize);
//*将image对象转成base64* var dataUrl = cvs.toDataURL('image/jpeg', compressRate); if(typeof callBack=='function') callBack(dataUrl); } img.src = res; }
服务器:
public function base64_uploadOp(){ header('Content-type:text/html;charset=utf-8'); $base64_image_content = $_POST['imgBase64']; //匹配出图片的格式 if (preg_match('/^(data:s*image/(w+);base64,)/', $base64_image_content, $result)) { $type = $result[2]; $member_id = $this->member_info['member_id']; $date = date("Ym"); $new_file =BASE_UPLOAD_PATH.DS."chat/".$date.DS; if (!file_exists($new_file)) { //检查是否有该文件夹,如果没有就创建,并给予最高权限 mkdir($new_file, 0700); } $file_name=time(); $new_file = $new_file . $file_name . ".{$type}"; if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) { $data = array(); $data['file_id'] = $file_name; $data['file_name'] = $new_file; $data['file_url'] =UPLOAD_SITE_URL.DS."chat/".$date.DS.$file_name . ".{$type}"; return json_encode($data); } else { exit("文件保存失败"); } }else{ exit("文件转换失败"); } }