layui导入excel表格文件

沟通交流群：
QQ群号： 555056599

github地址:
https://github.com/wangerzi/layui-excel

功能演示地址:
http://excel.wj2015.com

/**
 * 需要引用的外部文件
 */
<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
	layui.config({
		base: 'layui_exts/'
	}).extend({
		excel: 'excel'
	});
</script>
<!-- IE需要把JS放在上边，否则onclick失效 -->

/**
 * HTML5代码
 * 绑定input按钮
 */
<div class="layui-form-item">
	<div class="layui-form-label">导入操作</div>
	<div class="layui-form-block">
		<input type="file" class="layui-btn layui-btn-primary" id="LAY-excel-import-excel" multiple="multiple">
	</div>
</div>

/**
 * JavaScript代码
 */
layui.use(['jquery', 'layer', 'upload', 'excel', 'laytpl', 'element', 'code'], function(){
  var $ = layui.jquery;
  var layer = layui.layer;
  var upload = layui.upload;
  var excel = layui.excel;
  var laytpl = layui.laytpl;
  var element = layui.element;
   /**
    * 页面加载事件
    */
	$(function(){
	    // 监听上传文件的事件
	    $('#LAY-excel-import-excel').change(function(e) {
	      var files = e.target.files;
	      uploadExcel(files);
	    });
	    // 文件拖拽
	    $('body')[0].ondragover = function(e) {
	      e.preventDefault();
	    }
	    $('body')[0].ondrop = function(e) {
	      e.preventDefault();
	      var files = e.dataTransfer.files;
	      uploadExcel(files);
	    }
	  });
	});

	 /**
	  * 上传excel的处理函数，传入文件对象数组
	  * @param  {[type]} files [description]
	  * @return {[type]}       [description]
	  */
	 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) {
	       // 还可以再进行数据梳理
		/*
		   data = excel.filterImportData(data, {
	         'id': 'A'
	         ,'username': 'B'
	         ,'experience': 'C'
	         ,'sex': 'D'
	         ,'score': 'E'
	         ,'city': 'F'
	         ,'classify': 'G'
	         ,'wealth': 'H'
	         ,'sign': 'I'
	       });
		*/
	      // 如果不需要展示直接上传，可以再次 $.ajax() 将JSON数据通过 JSON.stringify() 处理后传递到后端即可
	      $.ajax({
              url: '/article/inputExcel'
              , data:{data:data}
              , dataType: 'json'
              , success: function (res) {
                  if(res.code == 200){
                      layer.msg('导入成功',{icon:1,time:1000});
                  }
              }
          })
          //展示表格文件转换成的json数据格式
	      layer.open({
	         title: '文件转换结果'
	         ,area: ['799px', '399px']
	         ,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);
	   }
	 };
 });