THINKPHP5 使用ajax异步上传图片

为了美化上传过程，所以我们有时候需要使用ajax异步上传并处理图片，下文主要介绍thinphp5如何使用ajax异步上传图片

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="__JS__jquery-3.3.1.min.js"></script>
<script src="__JS__layer/layer.js"></script>
<body>
  <form id="form">
       <p><input type="file" id="avatar" name="avatar" onchange="fun(this)" style="display:none" /></p>
 </form>
<div id="pathimg"><img src="uloads/avatar/{$data['newname']}" width="100" onclick="uploadFun()">
</div>
</body>
<script>
//点击照片后调用该函数
function uploadFun(){
    $('#avatar').click();
}
 
//选择图片后调用该函数
function fun(){     
    var data = new FormData($('#form')[0]);   //获取表单对象信息
    $.ajax({  
        url: "{:url('index/upload')}", 
        type: 'POST',  
        data: data, 
        dataType: 'JSON',  
        cache: false,  
        processData: false,  
        contentType: false  
    }).done(function(ret){  
        if(ret['success']){
            var pathimg;    //定义图片路径
            pathimg = '<img src="uploads/' + ret['road']  + '" width="100">';
            $('#pathimg').html(pathimg);
            layer.msg('上传成功');
        }else{  
            layer.msg('上传失败');
        }  
    });  
    return false;
   }  
</script>
 
</html>

PHP

<?php
namespace app\index\controller;
use think\Controller;
use think\Request;
use think\Db;
use think\db\Query;
 
 
class Index extends Controller
{
 
    public function upload()
    {
        $file = request()->file('f');       //获取文件信息
        $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
        if($info){
            $imgpath=$info->getSaveName();      //获取图片名字
            $sql=Db::name('users')
                ->where('uid',8)
                ->update(['avatar'=>$imgpath]);       
            $response['success'] = true;  
            $response['road'] = $imgpath;  
        }else{  
            $response['success'] = false;  
        }  
              
        echo json_encode($response);
    }
 
}