2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下;
3.然后前端,上传附件成功后,进行请求后端,读取数据,后端接口对应将附件数据读取出来,前端进行显示(ajax请求);
4.前端展示数据,用户对数据检测无误,点击保存(ajax请求后端保存代码的接口),当然也可以有选择性的选择某些数据记录进行保存,楼主这里做的是全部保存(后端处理接口,自动过滤重复数据);
5.拿到对应的所需有用数据即可, 对应的excel表格,因为需要获取到人员排期数据,所以楼主是通过判断单元格的背景色来识别
代码如下:(关键代码)
前端 对应html:
<!--导入数据操作层--> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true"></button> <h4>文件导入</h4> </div> <div> <div> <a href="https://www.jb51.net/public/uploadFile/人员资源动态匹配表-模板.xlsx"> <img alt="人员资源动态匹配表-模板" src="https://www.jb51.net/public/images/excel.jpg" /> <span>人员资源动态匹配表-模板.xlsx</span> </a> </div> <hr/> <form method="post"> <div title="Excel导入操作" data-options="iconCls:'icon-key'"> <input type="hidden" /> <input type="file" multiple="multiple"> <a href="javascript:;">上传</a> <a href="javascript:;">取消</a> <div></div> <br /> <hr /> <div></div> <br /> </div> </form> <!--数据显示表格--> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>项目名称</th> <th>项目编号</th> <th>功 能</th> <th>人 员</th> <th>日 期</th> </tr> </thead> <tbody></tbody> </table> </div> <div> <button type="button" data-dismiss="modal">关闭</button> <button type="button">保存</button> </div> </div> </div> </div>
对应js代码:
<script type="text/javascript"> //保存导入的数据 function SaveImport(){ var guid = $("#AttachGUID").val(); if (guid == '' || typeof guid == 'undefined') { alert('请先上传excel文件!'); return false; } $.ajax({ url: '/lazy/CheckExcelColumns?type=save&guid=' + guid, type: 'get', dataType: 'json', success: function (data) { alert(data.msg); $('#close_window').click(); console.log('报存数据成功!'); }, error:function(){ console.log('出错了!'); } }); } $(function(){ //导入层的js $("#import_schedule").bind('click', function(){ $("#gridImport_body").html(""); $("#import").modal("show"); }); //导入对应的函数 $('#file_upload').uploadify({ 'swf': '/public/uploadify/uploadify.swf', //FLash文件路径 'buttonText': '浏 览', //按钮文本 'uploader': '{{url("lazy/uploadExcel")}}', //后台处理程序的路径 'queueID': 'fileQueue', //队列的ID 'queueSizeLimit': 1, //队列最多可上传文件数量,默认为999 'auto': false, //选择文件后是否自动上传,默认为true 'multi': false, //是否为多选,默认为true 'removeCompleted': true, //是否完成后移除序列,默认为true 'fileSizeLimit': '10MB', //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值 'fileTypeDesc': 'Excel Files', //文件描述 'fileTypeExts': '*.xlsx', //上传的文件后缀过滤器 'onQueueComplete': function (event, data) { //所有队列完成后事件 //业务处理代码 //提示用户Excel格式是否正常,如果正常加载数据 var guid = $("#AttachGUID").val(); $.ajax({ url: '/lazy/CheckExcelColumns?type=check&guid=' + guid, type: 'get', dataType: 'json', success: function (data) { if (data.status) { // InitGrid(); //重新刷新表格数据 $.each(data.rows, function (i, item) { var tr = "<tr>"; tr += "<td>" + item['name']+ "</td>"; tr += "<td>" + item['identifier'] + "</td>"; tr += "<td>" + item['subject'] + "</td>"; tr += "<td>" + item['user'] + "</td>"; tr += "<td>" + item['getExcelTime'] + "</td>"; tr += "</tr>"; $("#gridImport_body").append(tr); }); }else{ alert(data.msg); } } }); }, 'onUploadStart': function (file) { InitUpFile(); //重置GUID(每次不同,用时间戳代替) $("#gridImport_body").html(""); //动态传参数 var guid = $("#AttachGUID").val(); var salt = 'test' ; //md5加密辅助串 var token = hex_md5(salt+guid) ; //校验参数 $("#file_upload").uploadify( "settings", 'formData', { 'folder': '数据导入excel文件', 'guid': guid, 'token':token, } ); }, 'onUploadError': function (event, queueId, fileObj, errorObj) { alert(errorObj.type + ":" + errorObj.info); } }); function InitUpFile(){ var timestamp = Date.parse(new Date()); $('#AttachGUID').val(timestamp); } </script>
后端代码: