base64上传头像；php ajax前端压缩图片上传；thinkphp5异步上传头像

实现效果：点击头像，直接选择图片，选完图片，直接执行异步上传并替换图片

相关知识点：php+ajax

亮点：如果选择图片较大，会在前端进行压缩上传，有利于提高上传速度和减轻服务器压力

html代码比较简单，实际上就是用绝对定位将上传框定位到图片上层，并将背景透明化即可，即实现了点击图片实际上是触发上传框效果，不做赘述

<img src="__HOMESTYLE__/images/pic110.jpg">
<input type="file" id="file" onchange="preview(this)" />
<script type="text/javascript">
      function preview(file){
           var prevDiv = document.getElementById('preview');
           if (file.files && file.files[0]) {
                var reader = new FileReader();
                reader.onload = function(evt){
                    UpladFile(); //文件上传框选择文件触发上传程序
                    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
                }
                reader.readAsDataURL(file.files[0]);
            }else{
                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
             }
        }
</script>
<h6 class="text-center"> <a>修改头像</a></h6>

上传头像以压缩代码：（layer.msg 是借用了第三方弹窗插件，具体使用方式请移步 http://layer.layui.com/）

<script>
function photoCompress(file,w,objDiv){
    var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
     ready.readAsDataURL(file);
     ready.onload=function(){
         var re=this.result;
         canvasDataURL(re,w,objDiv)
     }
}
function canvasDataURL(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
        h = that.height,
        scale = w / h;
        w = obj.width || w;
        h = obj.height || (w / scale);
        var quality = 0.7;  // 默认图片质量为0.7
        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);
        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
           quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality);
        // 回调函数返回base64的值
        callback(base64);
    }
}
/**
  * 将以base64的图片url数据转换为Blob
  * @param urlData
  *            用url方式表示的base64图片数据
  */
function convertBase64UrlToBlob(urlData){
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}


 var xhr;
 //上传文件方法
 function UpladFile(){
     layer.msg('图片上传中');
     var fileObj = document.getElementById("file").files[0]; // js 获取文件对象
     var url = "{:url('home/member/touxiang_upload')}"; // 接收上传文件的后台地址 

     var form = new FormData(); // FormData 对象

     if(fileObj.size/1024 > 1025) { //大于1M，进行压缩上传
          photoCompress(fileObj, {
              quality: 0.2
          }, function(base64Codes){
              var bl = convertBase64UrlToBlob(base64Codes);
              form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
              xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
              xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
              xhr.onload = uploadComplete; //请求完成
              xhr.onerror =  uploadFailed; //请求失败
              xhr.upload.onloadstart = function(){
              ot = new Date().getTime();
              oloaded = 0;
           };
            xhr.send(form); //开始上传，发送form数据
         });
     }else{ //小于等于1M 原图上传
          form.append("file", fileObj); // 文件对象
          xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
          xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
          xhr.onload = uploadComplete; //请求完成
          xhr.onerror =  uploadFailed; //请求失败
          xhr.upload.onloadstart = function(){
          ot = new Date().getTime();
          oloaded = 0;
      };

      xhr.send(form); //开始上传，发送form数据
   }
 }

//上传成功响应
function uploadComplete(evt) {
     //服务断接收完文件返回的结果
     var data = JSON.parse(evt.target.responseText);
      if(data == 1) {
          layer.msg('图片上传成功');
      }else if(data == -3){
          layer.msg('文件类型不正确或文件偏大');
      }else if(data == -4){
          layer.msg('图片上传失败');
      }
 }
 //上传失败
function uploadFailed(evt) {
      layer.msg('图片上传失败');
}
</script>

后端处理代码：后端处理的时候因为前端头像像素是91px*91px，所以又用了thumb方法生成了缩略图，并返回缩略图给前端显示

public function touxiang_upload(){
    if(isset($_FILES) && !empty($_FILES)){
        // 移动到框架应用根目录/public/uploads/ 目录下
        if($_FILES["file"]["error"]){
            return ['code'=>-1,'msg'=>$_FILES["file"]["error"]];   
        }else{
            //加限制条件
            //判断上传文件类型为png或jpg且大小不超过2048000B
            if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg") && $_FILES["file"]["size"]<2048000){
                    //防止文件名重复
                    $file_name_array = explode(".",$_FILES['file']['name']);
                    $name = rand(1000,9999).time().rand(1000,9999).".".$file_name_array[1];
                    $name_file = ROOT_PATH."uploads/touxiang/".$name;
                     //检查文件或目录是否存在
                    if(file_exists($name_file)){
                        echo -2; //该文件已存在，需让用户重新上传 
                    }else{  
                        //保存文件,   move_uploaded_file 将上传的文件移动到新位置  
                        move_uploaded_file($_FILES["file"]["tmp_name"],$name_file);//将临时地址移动到指定地址

                        $image = \think\Image::open(ROOT_PATH.'/uploads/touxiang/'.$name);
                        $image->thumb(91, 91,\think\Image:: THUMB_SCALING)->save(ROOT_PATH.'/uploads/touxiang/thumb_'.($name));
                        $thumb_img = '/thumb_'.($name);

                        $update_data = [
                            'headimg'=>str_replace('\\', "/", $thumb_img)
                        ];
                        $update_effect = Db::name("member")->where('id',$member_id)->update($update_data);
                        if($update_effect){
                            echo 1; //上传成功
                        }else{
                            echo -4; //上传失败
                        }
                    }       
            }else{
                echo -3; //文件类型不正确或文件偏大 
            }
        }
    }
}

base64上传头像；php ajax前端压缩图片上传；thinkphp5异步上传头像

猜你喜欢