思路:

1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳);

2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下;

3.然后前端,上传附件成功后,进行请求后端,读取数据,后端接口对应将附件数据读取出来,前端进行显示(ajax请求);

4.前端展示数据,用户对数据检测无误,点击保存(ajax请求后端保存代码的接口),当然也可以有选择性的选择某些数据记录进行保存,楼主这里做的是全部保存(后端处理接口,自动过滤重复数据);

5.拿到对应的所需有用数据即可, 对应的excel表格,因为需要获取到人员排期数据,所以楼主是通过判断单元格的背景色来识别

代码如下:(关键代码)

前端 对应html:

  1. <!--导入数据操作层-->
  2. <div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  3. <div class="modal-dialog modal-lg">
  4. <div class="modal-content">
  5. <div class="modal-header bg-primary">
  6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  7. <h4 class="modal-title">文件导入</h4>
  8. </div>
  9. <div class="modal-body">
  10. <div style="text-align:right;padding:5px">
  11. <a href="/public/uploadFile/人员资源动态匹配表-模板.xlsx" onclick="javascript:;">
  12. <img alt="人员资源动态匹配表-模板" src="/public/images/excel.jpg" />
  13. <span style="font-size:larger;font-weight:200;color:red">人员资源动态匹配表-模板.xlsx</span>
  14. </a>
  15. </div>
  16. <hr/>
  17. <form id="ffImport" method="post">
  18. <div title="Excel导入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
  19. <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />
  20. <input id="file_upload" name="file_upload" type="file" multiple="multiple">
  21. <a href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上传</a>
  22. <a href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>
  23.  
  24. <div id="fileQueue" class="fileQueue"></div>
  25. <br />
  26. <hr style="width:98%" />
  27. <div id="div_files"></div>
  28. <br />
  29. </div>
  30. </form>
  31.  
  32. <!--数据显示表格-->
  33. <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
  34. <thead id="gridImport_head">
  35. <tr>
  36. <th>项目名称</th>
  37. <th>项目编号</th>
  38. <th>功 能</th>
  39. <th>人 员</th>
  40. <th>日 期</th>
  41. </tr>
  42. </thead>
  43. <tbody id="gridImport_body"></tbody>
  44. </table>
  45. </div>
  46. <div class="modal-footer">
  47. <button type="button" class="btn btn-default" data-dismiss="modal" id="close_window">关闭</button>
  48. <button type="button" class="btn btn-primary" onclick="javascript:SaveImport();">保存</button>
  49. </div>
  50. </div>
  51. </div>
  52. </div>

对应js代码:

  1. <script type="text/javascript">
    //保存导入的数据
  2. function SaveImport(){
  3. var guid = $("#AttachGUID").val();
  4. if (guid == '' || typeof guid == 'undefined') {
  5. alert('请先上传excel文件!');
  6. return false;
  7. }
  8.  
  9. $.ajax({
  10. url: '/lazy/CheckExcelColumns?type=save&guid=' + guid,
  11. type: 'get',
  12. dataType: 'json',
  13. success: function (data) {
  14. alert(data.msg);
  15. $('#close_window').click();
  16. console.log('报存数据成功!');
  17. },
  18. error:function(){
  19. console.log('出错了!');
  20. }
  21. });
  22. }
  23.  
  24. $(function(){
  25. //导入层的js
  26. $("#import_schedule").bind('click', function(){
  27. $("#gridImport_body").html("");
  28. $("#import").modal("show");
  29. });
  30.  
  31. //导入对应的函数
  32. $('#file_upload').uploadify({
  33. 'swf': '/public/uploadify/uploadify.swf', //FLash文件路径
  34. 'buttonText': '浏 览', //按钮文本
  35. 'uploader': '{{url("lazy/uploadExcel")}}', //后台处理程序的路径
  36. 'queueID': 'fileQueue', //队列的ID
  37. 'queueSizeLimit': 1, //队列最多可上传文件数量,默认为999
  38. 'auto': false, //选择文件后是否自动上传,默认为true
  39. 'multi': false, //是否为多选,默认为true
  40. 'removeCompleted': true, //是否完成后移除序列,默认为true
  41. 'fileSizeLimit': '10MB', //单个文件大小,0为无限制,可接受KB,MB,GB等单位的字符串值
  42. 'fileTypeDesc': 'Excel Files', //文件描述
  43. 'fileTypeExts': '*.xlsx', //上传的文件后缀过滤器
  44. 'onQueueComplete': function (event, data) { //所有队列完成后事件
  45. //业务处理代码
  46. //提示用户Excel格式是否正常,如果正常加载数据
  47. var guid = $("#AttachGUID").val();
  48. $.ajax({
  49. url: '/lazy/CheckExcelColumns?type=check&guid=' + guid,
  50. type: 'get',
  51. dataType: 'json',
  52. success: function (data) {
  53. if (data.status) {
  54. // InitGrid(); //重新刷新表格数据
  55. $.each(data.rows, function (i, item) {
  56. var tr = "<tr>";
  57. tr += "<td>" + item['name']+ "</td>";
  58. tr += "<td>" + item['identifier'] + "</td>";
  59. tr += "<td>" + item['subject'] + "</td>";
  60. tr += "<td>" + item['user'] + "</td>";
  61. tr += "<td>" + item['getExcelTime'] + "</td>";
  62. tr += "</tr>";
  63. $("#gridImport_body").append(tr);
  64. });
  65. }else{
  66. alert(data.msg);
  67. }
  68. }
  69. });
  70. },
  71. 'onUploadStart': function (file) {
  72. InitUpFile(); //重置GUID(每次不同,用时间戳代替)
  73. $("#gridImport_body").html("");
  74. //动态传参数
  75. var guid = $("#AttachGUID").val();
             var salt = 'test' ; //md5加密辅助串
  76. var token = hex_md5(salt+guid) ; //校验参数
  77. $("#file_upload").uploadify(
  78. "settings",
  79. 'formData', {
  80. 'folder': '数据导入excel文件',
  81. 'guid': guid,
  82. 'token':token,
  83. }
  84. );
  85. },
  86. 'onUploadError': function (event, queueId, fileObj, errorObj) {
  87. alert(errorObj.type + ":" + errorObj.info);
  88. }
  89. });
  90.  
  91. function InitUpFile(){
  92. var timestamp = Date.parse(new Date());
  93. $('#AttachGUID').val(timestamp);
  94. }
    </script>
  95.  
  96. 后端代码:
  1. //上传文件处理
  2. public function uploadExcelAction()
  3. {
  4. $targetFolder = '/public/uploadFile/'; // Relative to the root
         $salt = 'test';
  5. $verifyToken = md5($test . $_POST['guid']);
  6. if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
  7. $tempFile = $_FILES['Filedata']['tmp_name'];
  8. $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
  9. $targetFile = rtrim($targetPath,'/') . '/' . $verifyToken.'.xlsx';
  10.  
  11. $fileTypes = array('xlsx');
  12. $fileParts = pathinfo($_FILES['Filedata']['name']);
  13.  
  14. if (in_array($fileParts['extension'],$fileTypes)) {
  15. move_uploaded_file($tempFile,$targetFile);
  16. echo '1';
  17. } else {
  18. echo 'Invalid file type.';
  19. }
  20. }else{
  21. echo 'Invalid params.';
  22. }
  23. die;
  24. }
  1. 处理excel数据,就说两个关键点:取单元格的值和背景色
  1.     $objReader = \PHPExcel_IOFactory::createReader('Excel2007');
  2. $objPHPExcel = $objReader->load($targetFile);
  3. $sheet = $objPHPExcel->getSheet();
  4. $sheetRows = $sheet->getHighestDataRow(); // 取得总行数
  5. $sheetColumns = PHPExcel_Cell::columnIndexFromString($sheet->getHighestDataColumn()); //列数
  6.  
  7. //读取单元格
  8. $value = $objPHPExcel->getActiveSheet()->getCell($columns[$k] . $j)->getValue(); //获取每个单元格的值
  9. $fillColor = $objPHPExcel->getActiveSheet()->getStyle($columns[$k] . $j)->getFill()->getStartColor()->getARGB(); //背景色
  10.  

下面附图:

导入界面:

excel表:

  1.  

基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能的更多相关文章

  1. Spring Boot下的一种导入Excel文件的代码框架

    1.前言 ​ Spring Boot下如果只是导入一个简单的Excel文件,是容易的.网上类似的文章不少,有的针对具体的实体类,代码可重用性不高:有的利用反射机制或自定义注解,开发了Excel导入工具 ...

  2. 基于Tkinter以及百度翻译爬虫做的一个小的翻译软件

    首先看效果: 输入Hello, 可见输出 int. 打招呼 下面看源码: from tkinter import * import requests# 首先导入用到的库 request = reque ...

  3. 导入Excel 文件(图片和文字)NPOI+BootStrap fileinput 插件 的结合使用

    1.页面代码: <!DOCTYPE html><html><head> <meta name="viewport" content=&qu ...

  4. 使用POI做的一个生成Excel的工具类。包含了导出Excel和解析Excel方法

    PoiExcelUtils.java /** * */ package com.common.office; import java.io.File; import java.io.FileInput ...

  5. 基于ThinkPHP框架的简单的后台管理系统

    版权声明:本文为博主原创文章,未经博主允许不得转载. 基于ThinkPHP框架的简单的后台管理系统 一个简单的后台管理系统,可能还不全面,可以自己改,有登录功能 实例如图:    

  6. .Net Core 基于CAP框架的事件总线

    .Net Core 基于CAP框架的事件总线 CAP 是一个在分布式系统中(SOA,MicroService)实现事件总线及最终一致性(分布式事务)的一个开源的 C# 库,她具有轻量级,高性能,易使用 ...

  7. 用MVVM做了一个保存网页的工具-上篇

    前言: 你是否有过收藏了别人博客或文章,当想用的时候却找不到?你是否有过收藏了别人博客或文章,却因为没有网络而打不开网页?OK,下面是我做的一个工具,有兴趣的同学们可以download 玩下,哈哈^. ...

  8. 基于.NET的程序读取Excel文件的解决方案

    目录 0. 前言 1. 使用NPOI库读取Excel文件 2. 使用OleDbConnection 3. 相关参考 shanzm-2020年12月8日 23:48:11 0. 前言 以前基于 .NET ...

  9. Spring Boot下的一种导出Excel文件的代码框架

    1.前言 ​ 在Spring Boot项目中,将数据导出成Excel格式文件是常见的功能.与Excel文件导入类似,此处也用代码框架式的方式实现Excel文件导出,使得代码具有可重用性,并保持导出数据 ...

随机推荐

  1. 认识CSS中字体图标

    前端之HTML,CSS(十一) 字体图标 使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...

  2. 我最近用Python写了一个算法,不需要写任何规则就能自动识别一个网页的内容

    我最近用Python写了一个算法,不需要写任何规则就能自动识别一个网页的内容,目前测试了300多个新闻网站的新闻页,都能准确识别

  3. Git的介绍和使用

    Git是目前世界上最先进的分布式版本控制系统 Git的安装 1.在linux上安装 你可以先输入git,看看系统是不是已经自带了git 或者 sudo apt-get install git  就可以 ...

  4. Nginx 反向代理(http转htpps,并支持80端口继续提交post请求)

    项目是一个web server + 多个client的形式,client由用户安装在自己的电脑上 由http升级为https后,我们通过在Nginx做了80端口重定向443的配置,使用户通过访问htt ...

  5. Java reflect 反射 1

    1 反射的概述 反射含义:可以获取正在运行的Java对象. JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法; 对于任意一个对象,都能够调用它的任意一个方法; 这种动态 ...

  6. php中常量 const属性,静态属性,静态的函数方法

    <?php//php中的常量define('MYNUM', 2000);echo MYNUM.'<br>';if(!defined('MYNUM')){ define('MYNUM' ...

  7. nginx 配置 单页面应用的解决方案

    server { listen 80; server_name example.com; root /var/www/example.com; gzip_static on;  location / ...

  8. echarts 添加标线,设置颜色

    <script src="assets/js/jquery-1.8.3.min.js"></script> <!--echart图表引入js--> ...

  9. Java基础教程(7)--运算符

      现在,我们已经学会了如何声明和初始化变量,但你可能想知道如何操作它们.运算符是对一个,两个或三个操作数执行特定操作并返回结果的特殊符号.下表列出了Java中的运算符:   表格中的运算符是按照从上 ...

  10. 六、阻塞队列LinkedBlockQueue

    一.简介 Java提供了FIFO先进先出的阻塞队列实现,这其实是一种生产者消费者理念,可以通过阻塞队列将生产者和消费者进行解耦合. LinkedBlockQueue是一种无界队列,但事实上它只是队列可 ...