前端HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script> </head> <body> <form method="post" enctype='multipart/form-data'> <input type="file" id="mypic" name="mypic" accept="image/*"> <input type="submit" id="tanchu"> </form> <script type="text/javascript"> $(function(){ var input = document.getElementById("mypic"); //$('#mypic').addEventListener('change',readFile,false);//此处不能用id选择器添加事件监听 input.addEventListener('change',readFile,false); function readFile(){ var file = this.files[0]; //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件 if(!/image\/\w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function () { compressImg(reader.result, function (res) { $.post( 'base64.php',//跳转的url {'IMAGE':res}, function(data){ //进行返回数据的处理 }, 'json' ) }); }; } //压缩图片 function compressImg(soureImg, callback) { self = this; var after = getByteLen(soureImg) / 1024; console.log('压缩前==>' + getByteLen(soureImg) / 1024 + 'kb'); console.log('压缩中...'); console.time('用时'); // 参数处理 var baseImg = soureImg; // 创建img var oImg = new Image(); oImg.src = baseImg; // 处理图片大小,宽度大于 1920则压缩大小为一半 var Iwidth; var Iheight; oImg.addEventListener('load', function (ev) { Iwidth = ev.target.width; Iheight = ev.target.height; if (Number(Iwidth) > 1920) { Iwidth = Iwidth / 2; Iheight = Iheight / 2; } // 创建canvas var canvas = document.createElement('canvas'); var cxt = canvas.getContext("2d"); canvas.width = Iwidth; canvas.height = Iheight; cxt.drawImage(oImg, 0, 0, Iwidth, Iheight); var canvasBase64 = canvas.toDataURL("image/jpeg", 0.5); callback(canvasBase64); // 垃圾回收 oImg = null; canvas = null; console.timeEnd('用时'); console.log('压缩后==>' + getByteLen(canvasBase64) / 1024 + 'kb'); console.log('转换率==>' + getByteLen(canvasBase64) / 1024 / after * 100 + '%'); }); } function getByteLen(str) { var l = str.length; var n = l; for (var i = 0; i < l; i++) { if (str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255) { n++ } } return n } }) </script> </body> </html>
后台php处理代码
<?php header('Content-type:text/html;charset="utf-8"'); /*echo '<pre>'; print_r($_POST['IMAGE']);exit;*/ //利用这样的方式也能达到刷选出来数据的目的 /*$img = trim($_POST['IMAGE']); $jpg = explode('/', explode(';', $img)[0])[1]; $start=strpos($img,','); $img= substr($img,$start+1);*/ $base64_img = trim($_POST['IMAGE']); preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result); $type = $result[2]; if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){ $path = './images'; if(!file_exists($path)){ mkdir($path,0777,true); } $file = uniqid();//基于以微秒计的当前时间，生成一个唯一的ID $fileName = $path .'/'. $file. '.' . $type; $img = str_replace($result[1], '', $base64_img); $img = str_replace(' ', '+', $img);//这一步要注意替换，要不然会出现乱码 $data = base64_decode($img); $success = file_put_contents($fileName, $data);//至此，图片已经上传成功，后续判断根据自己需求来更改 if($success){ $s_config['image_library'] = 'gd2'; $s_config['source_image'] = $path . '/' . $file . '.' .$type; $s_config['new_image'] = $path . '/s_' . $file . '.' .$type; $fileName_s = date('Ymd') . '/s_' . $file . '.' .$type; $s_config['create_thumb'] = true; $s_config['thumb_marker'] = ''; $s_config['maintain_ratio'] = true; $s_config['quality'] = 50; $s_config['width'] = 300; $s_config['height'] = 200; $this->load->library('image_lib', $s_config); $this->image_lib->resize(); echo json_encode(['data' => ['yt' =>$this->config->config['resources_img_url'] . $fileName, 'slt' => $this->config->config['resources_img_url'] . $fileName_s]]); }else{ echo json_encode(array('code'=>101,'msg'=>'上传失败')); } }else{ echo json_encode(array('code'=>101,'msg'=>'图片类型不符合')); }
