layui上傳寫法（自用）

自寫自用，作記錄用，備註之後再完善。寫的比較low

 

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="padding-top: 10px;">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">新增附件</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" id="name_val" autocomplete="off" class="layui-input" placeholder="請輸入附件名，便於查找">
                                <input type="hidden" name="accessory-url" id="accessory-url">
                            </div>
                            <div class="layui-input-inline">
                                <a class="layui-btn mechanism_btn" id="file1" data-type="reload">選擇附件</a>
                                <a class="layui-btn layui-btn-danger" id="save1" data-type="reload">上傳保存</a>
                            </div>
                            <div class="layui-input-inline">
                                {{-- 此處用來作剪切板複製 --}}
                                <input type="text" id="Clipboard" autocomplete="off" style="opacity: 0" readonly>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<table class="layui-hide" id="testData" lay-filter="testData"> </table>


<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="copy">複製網址</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>
<script>
    layui.use(['form','layer','laydate','table','laytpl','layedit','upload'], function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            table = layui.table,
            upload = layui.upload;
        //第一個實例
        table.render({
            elem: '#testData'
            // ,height: 312
            // ,url: '/teaching/teaching_ableskyData' //數據接口
            ,url: '/Admin_leiFirst_upload/operate_site_wwwPc_rules' //數據接口  由於權限問題只能用Add替換Data
            ,page: true //開啓分頁
            ,id : "testDataTable"
            ,cols: [[ //表頭
                {field: 'id', title: 'ID',width:80}
                ,{field: 'name', title: '上傳內容標識'}
                ,{field: 'url', title: '附件下載地址'}
                ,{field: 'create_at', title: '上傳時間'}
                ,{fixed: 'right', title: '操做', toolbar: '#barDemo', width:150 }
            ]]
        });
        table.on('tool(testData)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的刪除嗎？', function(index){
                    $.ajax({
                        url: '/Admin_leiFormRules_upload_del/operate_site_wwwPc_rules/' + data.id,
                        data: {},
                        type: 'get',
                        typeData: 'json',
                        success: function(res) {
                            layer.msg(res.msg, {icon: 1, time: 1000, shade: 0.4}, function(){
                                location.reload();
                            });
                        }
                    });
                })
            } else if(obj.event === 'copy') {
                $('#Clipboard').val(data.url).select();
                document.execCommand('Copy');
                layer.msg('複製成功');
            }
        });

        var uploadInst = upload.render({
            elem: '#file1'
            ,url: '/Admin_leiFormRules_upload/operate_site_wwwPc_rules'
            ,data: {'_token':"{{csrf_token()}}"}
            ,accept: 'file' // 任意文件格式
            ,multiple: true
            ,done: function(res){
                if(res.code==10000){
                    console.log(res);
                    $('#accessory-url').val(res.data.file);
                }else{
                    layer.msg(res.msg,{icon:2,time:3000});
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上傳失敗:'+res.msg+'</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            }
            ,error: function(){
                // layer.closeAll('loading') ; // 關閉 loading
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        $('#save1').on('click', function(){
            let get_url = $('#accessory-url').val();
            if(!get_url){
                layer.msg('請先選擇附件');
                return false;
            } else {
                $.ajax({
                    url: '/Admin_leiFormRules_upload_save/operate_site_wwwPc_rules',
                    data: {
                        _token: '{{csrf_token()}}',
                        name: $('#name_val').val(),
                        url: get_url
                    },
                    type: 'post',
                    typeData: 'json',
                    beforeSend: function() {
                      if(!$('#name_val').val()) {
                          layer.msg('請輸入附件標識名');
                          $('#name_val').focus();
                          return false;
                      }
                    },
                    success: function(res) {
                        layer.msg(res.msg, {icon: 1, time: 1000, shade: 0.4}, function(){
                            location.reload();
                        });
                    },
                    error: function(e) {
                        console.log(e);
                    }
                });
            }

        });


        function createTime(v){
            return new Date(parseInt(v)).toLocaleString()
        }

        /* 時間戳轉化開始 */

        Date.prototype.toLocaleString = function() {
            var y = this.getFullYear();
            var m = this.getMonth()+1;
            m = m<10?'0'+m:m;
            var d = this.getDate();
            d = d<10?("0"+d):d;
            // var h = this.getHours();
            // h = h<10?("0"+h):h;
            // var M = this.getMinutes();
            // M = M<10?("0"+M):M;
            // var S=this.getSeconds();
            // S=S<10?("0"+S):S;
            return y+"-"+m+"-"+d;
            // return y+"-"+m+"-"+d+" "+h+":"+M+":"+S;

        } ;


    });
</script>