ZLPMS/PMS.WebUI/Views/ProManager/toolupload.cshtml


@{
    ViewBag.Title = "Itemupload";
    Layout = "~/Views/Shared/_MainLayoutPage.cshtml";
}
<script src="~/Content/Scripts/plugins/layer-3.1/layer.js"></script>
<script src="~/Content/Scripts/plugins/layer-2.1/layer.js"></script>
@*<script src="~/ViewModels/ProjectManager.js?r=4.1"></script>*@
<link href="~/Content/Scripts/plugins/layer-2.1/skin/layer.css" rel="stylesheet" />
<script src="~/Content/Scripts/plugins/easyui/easyui-lang-zh_CN.js"></script>

<form id="Form1"  lay-filter="form" class="layui-form" style="padding: 5px 5px 0px 0px;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend><div id="name">批量导入</div></legend>
    </fieldset>
    <div class="layui-upload">
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>
    <div>
        <div class="div-btn" style="bottom:10px;position:fixed;width:100%;height:50px">
            <button type="button" style="float: left;margin-left:30%;margin-right:20px" class="layui-btn layui-btn-normal" id="Xmlfiles">选择文件</button>&nbsp;
            <button class="layui-btn" id="confirm" type="button">开始上传</button>
            @*<button type="reset" class="layui-btn layui-btn-primary" onclick="Close()">关闭</button>*@
        </div>
    </div>
</form>

<script type="text/javascript">
    layui.use(['form', 'upload'], function () {
            var form = layui.form,
                $ = layui.jquery,
                upload = layui.upload; //只有执行了这一步，部分表单元素才会自动修饰成功
        var demoListView = $('#demoList'),
        uploadListIns = upload.render({
            elem: '#Xmlfiles' //允许上传的文件后缀
                , url: '/ProManager/tool'
                , method: "post"
                , accept: 'file' //普通文件
                , exts: 'zip' //只允许上传压缩文件
                , multiple: false
                , number: '1'
                , auto: false
                , bindAction: '#confirm'


        , choose: function (obj) {
            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            读取本地文件
            obj.preview(function (index, file, result) {
                var tr = $(['<tr id="upload-' + index + '">'
                    , '<td class="uplad-filename">' + file.name + '</td>'
                    , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
                    , '<td>等待导入</td>'
                    , '<td>'
                    , '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                    , '<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                    , '</td>'
                    , '</tr>'].join(''));

                单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                });

                删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
            });
        }
        , done: function (res, index, upload) {
            if (res.code == 1) { //上传成功          
                var text = "共导入" + res.sum + "条记录,添加成功" + res.addsuccess + "条,修改" + res.updatesuccess_In + "条";
                top.ZLPMS.Msg(text, 1, 6000);
                var tr = demoListView.find('tr#upload-' + index)
                  , tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">导入成功</span>');
                tds.eq(3).find('.demo-reload').addClass('layui-hide'); //显示重传
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            else {
                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>