H5图片上传、压缩

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("文件转换失败");
        }
    }