layui多文件上传

最新推荐文章于 2024-07-18 17:33:01 发布

费马程序猿

最新推荐文章于 2024-07-18 17:33:01 发布

阅读量534

点赞数 4

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_43498992/article/details/139242840

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>上传多个附件示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
<div class="layui-upload">
    <button type="button" class="layui-btn" id="testList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script> layui.use('upload', function () {
    var $ = layui.jquery,
        upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList'), uploadListIns = upload.render({
        elem: '#testList',
        url: '/upload/',
        accept: 'file',
        multiple: true,
        auto: false,
        bindAction: '#testListAction',
        choose: function (obj) {
            var files = this.files = obj.pushFile();
            //将每次选择的文件追加到文件队列
            // 读取本地文件
            obj.preview(function (index, file, result) {
                var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '</tr>'].join(''));
                //单个重传
                tr.find('td:last').find('button').on('click', function () {
                    obj.upload(index, file);
                });
                demoListView.append(tr);
            });
        },
        done: function (res, index, upload) {
            if (res.code == 0) {
                //上传成功
                var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html('');
                //清空操作
                return delete this.files[index];
                // 删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
        },
        error: function (index, upload) {
            var tr = demoListView.find('tr#upload-' + index), tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide');
            // 显示重传
        }
    });
}); </script>
</body>
</html>