Layui导入CSV文件

最新推荐文章于 2024-06-22 14:05:55 发布
六乘六的吊儿郎当
最新推荐文章于 2024-06-22 14:05:55 发布
阅读量639
点赞数 3
文章标签： Layui CSV导入前端开发数据提交 AJAX
本文链接：https://blog.csdn.net/limaby/article/details/127384862
版权
Layui导入CSV文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Data</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-table-cell {
            font-size: 14px;
            padding: 0 5px;
            height: auto;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="layuimini-container">
        <div>
            <div class="layuimini-main">
                <button type="button" class="layui-btn" id="ImportTable">
                    <i class="layui-icon">&#xe601;</i>导入数据
                </button>
                <button type="button" class="layui-btn layui-btn-normal" id="Import">
                    <i class="layui-icon">&#xe67c;</i>提交数据
                </button>
            </div>
            <table class="layui-hide" id="ImportTableId" lay-filter="ImportTableFilter"></table>
        </div>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.config({
            base: '../layui_exts/'
        }).extend({
            excel: 'excel'
        });
        layui.use(['form', 'table', 'upload', 'excel'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            var layer = layui.layer;
            var upload = layui.upload;
            var da = [];


            $(document).on('click', "#Import", function () {
                if (da.length == 0) {
                    layer.alert("请先导入表格数据，检查数据格式是否正确，然后再提交数据！");
                    return;
                }
                var daa = da;
                $.ajax({
                    type: "post",
                    url: "../../Handler/DataProcess.ashx?action=Import",
                    data: JSON.stringify({ "data": daa }),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (data) {
                        if (data.data > 1) {
                            alert("数据导入成功！！！");
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                            parent.layui.table.reload('currentTableId');
                        } else {
                            layer.alert("数据导入失败！！！请检查数据格式是否正确！");
                        }
                    }
                });
            });



            table.render({
                elem: '#ImportTableId',
                data: da,
                height: 'full-5',
                cols: [[
                    /*                    { type: "checkbox", width: 50 },*/
                    { field: 'ServosNumber', width: 150, title: '伺服数量', sort: true, align: "center", edit: 'text' }

                    /*                    { title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center" }*/
                ]],
                limit: 1000
            });

            //执行实例
            var uploadInst = upload.render({
                elem: '#ImportTable', //绑定元素
                url: '', //上传接口  ../../Handler/DataProcess.ashx?action=Import
                accept: 'file', //普通文件
                exts: 'csv',
                acceptMime: '.csv',
                auto: false,  //选择文件后不自动上传
                before: function (obj) {
                    layer.load(); //上传loading
                },
                choose: function (obj) {// 选择文件回调
                    var files = obj.pushFile();
                    var fileArr = Object.values(files);// 注意这里的数据需要是数组，所以需要转换一下
                    //console.debug(fileArr)
                    // 用完就清理掉，避免多次选中相同文件时出现问题
                    for (var index in files) {
                        if (files.hasOwnProperty(index)) {
                            delete files[index];
                        }
                    }
                    uploadExcel(fileArr); // 只需要最新选择的文件
                },
                done: function (res) {
                    //上传完毕回调
                },
                error: function () {
                    //请求异常回调
                    setTimeout(function () {
                        layer.msg("上传失败！", {
                            icon: 1
                        });
                        //关闭所有弹出层
                        /*layer.closeAll(); //疯狂模式，关闭所有层*/
                    }, 1000);
                }
            });
            function uploadExcel(files) {
                try {
                    if (files.length < 1) {
                        alert("传入文件为空！！");
                    }
                    var supportReadMime = [
                        'application/vnd.ms-excel',
                        'application/msexcel',
                        'application/x-msexcel',
                        'application/x-ms-excel',
                        'application/x-excel',
                        'application/x-dos_ms_excel',
                        'application/xls',
                        'application/x-xls',
                        'application/vnd-xls',
                        'text/csv',
                        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                        ''
                    ];
                    layui.each(files, function (index, item) {
                        if (supportReadMime.indexOf(item.type) === -1) {
                            alert(item.name + '（' + item.type + '）为不支持的文件类型');
                        }
                    });
                    ///text/csv
                    if (files[0].type === "text/csv") {
                        let reader = new FileReader();
                        reader.readAsText(files[0], 'GB2312');
                        reader.onload = function (ev) {
                            var result = ev.target.result;
                            let arr = result.split('\n');
                            for (var i = 1; i < arr.length; i++) {
                                let d = arr[i].split(',');
                                var a = { ServosNumber: d[0], PLCType: d[1], ThirdParty: d[2], Limit: d[3] }
                                da[i - 1] = a;
                            }
                            layui.table.reload('ImportTableId');
                            layer.alert("请检查表格数据是否正确再提交数据！");
                        }
                    }

                } catch (e) {
                    layer.alert(e.message);
                }
            }
        });


    </script>
</body>
</html>