一、下載layui部署到專案，在頁面引入layui.css和layui.js。 

二、html程式碼

<div class="layui-form-item">
    <label class="layui-form-label">圖片</label>
    <div class="layui-input-block">
        <img id="pre_img" style="height: 30px;" />
        <button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img">
            <i class="layui-icon">&#xe67c;</i>上傳圖片
        </button>
        <input type="hidden" name="img" value="">
    </div>
</div>
 

三、js程式碼

layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var upload = layui.upload;
    //執行例項
    var uploadInst = upload.render({
        elem: '#upload_img' //繫結元素
        ,url: '/api/Image/upload_img' //上傳介面
        ,accept:'images'
        ,done: function(res){
            //上傳完畢回撥
            $('#pre_img').attr('src',res.msg);
            $('input[name="img"]').val(res.msg);
        }
        ,error: function(){
            //請求異常回調
        }
    });
});
 

四、封裝上傳方法(TP5上傳檔案類      可以根據實際專案調整，只需要到時候返回圖片的路徑即可)

public function upload_img(){
    $file = request()->file('file'); // 獲取上傳的檔案
    if($file==null){
        exit(json_encode(array('code'=>1,'msg'=>'未上傳圖片')));
    }
    // 獲取檔案字尾
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = end($temp);
    // 判斷檔案是否合法
    if(!in_array($extension,array("gif","jpeg","jpg","png"))){
        exit(json_encode(array('code'=>1,'msg'=>'上傳圖片不合法')));
    }
    $info = $file->move(ROOT_PATH.'public'.DS.'uploads'); // 移動檔案到指定目錄 沒有則建立
    $img = '/uploads/'.$info->getSaveName();
    exit(json_encode(array('code'=>0,'msg'=>$img)));
 }