layui扩展：excel上传

Pages/js/lay-config.js

@@ -27,4 +27,5 @@ layui.config({
     echartsTheme: 'echarts/echartsTheme', // echarts图表主题扩展
     wangEditor: 'wangEditor/wangEditor', // wangEditor富文本扩展
     layarea: 'layarea/layarea', //  省市县区三级联动下拉选择器
+    excel:'excel/excel',//excel上传扩展
 });

Pages/page/Graphic/FigureNumber/FigureNumberList.html

@@ -45,6 +45,7 @@
             <div class="layui-btn-container">
                 <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                 <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
+                <button type="button" id="LAY-excel-upload" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe67c;</i>导入</button>
             </div>
         </script>
 
@@ -58,12 +59,15 @@
         </div>
     </div>
     <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
+    <script src="../../../js/lay-config.js" charset="utf-8"></script>
     <script src="../../../js/PublicParameters/PublicParameters.js" charset="utf-8"></script>
     <script>
-        layui.use(['form', 'table'], function () {
+        layui.use(['form', 'table', 'excel', 'upload'], function () {
             var $ = layui.jquery,
                 form = layui.form,
-                table = layui.table;
+                table = layui.table,
+                excel = layui.excel,
+                upload = layui.upload;
 
             var apiUrl = GetWebApiUrl();
 
@@ -98,6 +102,26 @@
                 skin: 'line'
             });
 
+            upload.render({
+                elem: '#LAY-excel-upload',  //绑定元素
+                url: '/upload/', //上传接口（PS:这里不用传递整个 excel）
+                auto: false,  //选择文件后不自动上传
+                accept: 'file',
+                choose: function (obj) {// 选择文件回调
+                    var files = obj.pushFile()
+                    var fileArr = Object.values(files)// 注意这里的数据需要是数组，所以需要转换一下
+
+                    // 用完就清理掉，避免多次选中相同文件时出现问题
+                    for (var index in files) {
+                        if (files.hasOwnProperty(index)) {
+                            delete files[index]
+                        }
+                    }
+                    $('#LAY-excel-upload').next().val('');
+                    uploadExcel(fileArr) // 如果只需要最新选择的文件，可以这样写： uploadExcel([files.pop()])
+                }
+            });
+
             // 监听搜索操作
             form.on('submit(data-search-btn)', function (data) {
                 var result = JSON.stringify(data.field);
@@ -261,6 +285,40 @@
                     return false;
                 });
             }
+
+            function uploadExcel(files) {
+                try {
+                    excel.importExcel(files, {
+                        // 读取数据的同时梳理数据
+                        fields: {
+                            'id': 'A',
+                            'username': 'B',
+                            'experience': 'C',
+                            'sex': 'D',
+                            'score': 'E',
+                            'city': 'F',
+                            'classify': 'G',
+                            'wealth': 'H',
+                            'sign': 'I'
+                        }
+                    }, function (data) {
+                        alert(11)
+                        // 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
+                        // layer.open({
+                        //     title: '文件转换结果'
+                        //     , area: ['800px', '400px']
+                        //     , tipsMore: true
+                        //     , content: laytpl($('#LAY-excel-export-ans').html()).render({ data: data, files: files })
+                        //     , success: function () {
+                        //         element.render('tab')
+                        //         layui.code({})
+                        //     }
+                        // })
+                    })
+                } catch (e) {
+                    layer.alert(e.message)
+                }
+            }
         });
     </script>
 </body>