三步走

第一步:html程式碼

<div class="col-lg-6 uploadID">
    圖片xxx
    <div>
        <input type="file" name="sfz_img" id="ulFont" required>
        <input type="hidden" name="sfzImg">  
        <img  id="ulFontImg">
    </div>
</div>
<div class="col-lg-6 uploadID ">
    圖片xxx
    <div>
        <input type="file" name="sff_img" id="ulBack" required>
        <input type="hidden" name="sffImg">
        <img id="ulBackImg">
    </div>
</div>
 

第一個input是檔案上傳的file

第二個input是hidden,用於提交圖片地址到控制器

第三個img是即時顯示圖片

第二步:js程式碼

<script src="__PUBLIC__/layui/layui.js"></script>
<script>
    var ajaxUrl = "{:U('member/Account/realAccount')}";
    layui.use('upload', function(){
        var upload = layui.upload;

        //執行例項
        var uploadInst = upload.render({
            elem: '#ulFont' //繫結元素
            ,url: "{:U('member/Account/upload')}" //上傳介面
            ,data: {name:$("#ulFont").attr('name')}
            ,done: function(res){
                //上傳完畢回撥
//                console.log(res);
                $("#ulFont").next().next().attr('src',res.data.src); //給img賦予src值
                $("#ulFont").next().next().css({'height':'150px'});  //給img賦予高度
                $("#ulFont").next().val(res.data.src);  //給隱藏域賦予圖片地址用於提交到控制器
            }
            ,error: function(){
                //請求異常回調
            }
        });
    });
</script>
 

請參考layui官方文件:https://www.layui.com/doc/modules/upload.html

簡要說明: elem:後面接的是input(file) 的id

url是控制器上傳介面

data是額外上傳的資料(根據需要新增)

第三步:控制器--方法

public function upload(){
//        dump(I('post.name')); die;
        $file_name = I('post.name');  //layui中data提交過來的資料
        $img = $_FILES[$file_name];
        $upload = new \Think\Upload();// 例項化上傳類
        $upload->maxSize =     3145728 ;// 設定附件上傳大小
        $upload->exts    =     array('jpg', 'gif', 'png', 'jpeg');// 設定附件上傳型別
        $upload->autoSub = true; // 開啟子目錄儲存 並以日期（格式為Ymd）為子目錄
        $upload->subName = array('date','Ymd');
        $upload->rootPath =     './Public/Uploads/'; // 設定附件上傳根目錄
        $upload->saveName = array('uniqid',''); // 設定附件上傳（子）目錄
        // 上傳檔案
        $info   =   $upload->uploadOne($img);
        if($info){  //返回格式必須是json  可以參考layui文件
            $res = [
                "code"=> 0,
                "msg"=> "上傳成功",
                "data"=> ["src"=> "/Public/Uploads/".$info['savepath'].$info['savename']]  //圖片地址返回給前端
            ];
            echo json_encode($res);
        }else{
            $res = [
                "code"=> -1,
                "msg"=> "上傳失敗",
                "data"=> ""
            ];
            echo json_encode($res);
        }

    }
 

然後,將前端所有的input值提交到控制器中的新增方法中就闊以了