1. 程式人生 > 其它 >layui檔案上傳

layui檔案上傳

//前端程式碼

<div class="layui-form-item">
    <label class="layui-form-label">修改頭像</label>
    <div class="layui-input-inline uploadHeadImage">
        <div class="layui-upload-drag" id="headImg">
            <i class="layui-icon"></i>
            <p>點選上傳圖片,或將圖片拖拽到此處</p>
        </div>
    </div>
    <div class
="layui-input-inline"> <div class="layui-upload-list"> <img class="layui-upload-img headImage" src="" id="demo1"> <p id="demoText"></p> </div> </div> </div>

//js程式碼

<script>layui.use(['form', 'layer','upload',"element"],
    
function() { $ = layui.jquery; var form = layui.form, upload = layui.upload, layer = layui.layer; //拖拽上傳 var uploadInst = upload.render({ elem: '#headImg' , url: '{:url("uploadImg")}' , size: 500 , before:
function (obj) { //預讀本地檔案示例,不支援ie8 obj.preview(function (index, file, result) { $('#demo1').attr('src', result); //圖片連結(base64) }); } , done: function (res) { console.log(res); //如果上傳失敗 if (res.code > 0) { return layer.msg('上傳失敗'); } var demoText = $('#demoText'); // demoText.html('<span style="color: #8f8f8f;">上傳成功!!!</span>'); $("#imagepath").val(res.image) layer.msg("上傳成功") } , error: function () { //演示失敗狀態,並實現重傳 var demoText = $('#demoText'); demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>'); demoText.find('.demo-reload').on('click', function () { uploadInst.upload(); }); } }); element.init(); });

//tp控制器方法

    // 圖片上傳
    public function uploadImg(){
        // 上傳程式碼
        $file = request()->file('file');
        // 上傳到本地伺服器
        $savename = \think\facade\Filesystem::disk('public')->putFile( 'goods', $file);
        $data['image'] = $savename;
        $data['code'] = 0;

        return json($data);
    }