layui上传写法（自用）

Posted 2020-11-27 ichenchao

自写自用，做记录用，备注以后再完善。写的比较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>