基于yaf框架和uploadify插件如何導(dǎo)入excel文件實(shí)現(xiàn)查看并保存數(shù)據(jù)的功能

這篇文章主要為大家展示了“基于yaf框架和uploadify插件如何導(dǎo)入excel文件實(shí)現(xiàn)查看并保存數(shù)據(jù)的功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“基于yaf框架和uploadify插件如何導(dǎo)入excel文件實(shí)現(xiàn)查看并保存數(shù)據(jù)的功能”這篇文章吧。

思路：

1.首先，頁(yè)面前端，上傳附件，提交給后臺(tái)，并帶一個(gè)隨機(jī)性的參數(shù)（可以用時(shí)間戳）；

2.后端接收附件，做一系列的邏輯處理，無(wú)誤后，將對(duì)應(yīng)的文件存儲(chǔ)在上傳的目錄下；

3.然后前端，上傳附件成功后，進(jìn)行請(qǐng)求后端，讀取數(shù)據(jù)，后端接口對(duì)應(yīng)將附件數(shù)據(jù)讀取出來(lái)，前端進(jìn)行顯示（ajax請(qǐng)求）；

4.前端展示數(shù)據(jù)，用戶對(duì)數(shù)據(jù)檢測(cè)無(wú)誤，點(diǎn)擊保存（ajax請(qǐng)求后端保存代碼的接口），當(dāng)然也可以有選擇性的選擇某些數(shù)據(jù)記錄進(jìn)行保存，樓主這里做的是全部保存（后端處理接口，自動(dòng)過(guò)濾重復(fù)數(shù)據(jù)）；

5.拿到對(duì)應(yīng)的所需有用數(shù)據(jù)即可， 對(duì)應(yīng)的excel表格，因?yàn)樾枰@取到人員排期數(shù)據(jù)，所以樓主是通過(guò)判斷單元格的背景色來(lái)識(shí)別

代碼如下：（關(guān)鍵代碼）

前端 對(duì)應(yīng)html：

<!--導(dǎo)入數(shù)據(jù)操作層-->
<div id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-lg">
 <div class="modal-content">
  <div class="modal-header bg-primary">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  <h5 class="modal-title">文件導(dǎo)入</h5>
  </div>
  <div class="modal-body">
  <div >
   <a href="/public/uploadFile/人員資源動(dòng)態(tài)匹配表-模板.xlsx" onclick="javascript:;">
   <img alt="人員資源動(dòng)態(tài)匹配表-模板" src="/public/images/excel.jpg" />
   <span >人員資源動(dòng)態(tài)匹配表-模板.xlsx</span>
   </a>
  </div>
  <hr/>
  <form id="ffImport" method="post">
   <div title="Excel導(dǎo)入操作"  data-options="iconCls:'icon-key'">
   <input class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" /> 
   <input id="file_upload" name="file_upload" type="file" multiple="multiple">   
   <a href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上傳</a>
   <a href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消</a>
   <div id="fileQueue" class="fileQueue"></div>
   <br />   
   <hr  />   
   <div id="div_files"></div>
   <br />   
   </div>
  </form>
  <!--數(shù)據(jù)顯示表格-->
  <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
   <thead id="gridImport_head">
   <tr>
    <th>項(xiàng)目名稱</th>
    <th>項(xiàng)目編號(hào)</th>
    <th>功 能</th>
    <th>人 員</th>
    <th>日 期</th>
   </tr>
   </thead>
   <tbody id="gridImport_body"></tbody>
  </table>
  </div>
  <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal" id="close_window">關(guān)閉</button>
  <button type="button" class="btn btn-primary" onclick="javascript:SaveImport();">保存</button>
  </div>
 </div>
 </div>
</div>

對(duì)應(yīng)js代碼：

<script type="text/javascript">
 //保存導(dǎo)入的數(shù)據(jù)
 function SaveImport(){
 var guid = $("#AttachGUID").val();
 if (guid == '' || typeof guid == 'undefined') {
  alert('請(qǐng)先上傳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('報(bào)存數(shù)據(jù)成功！');
  },
  error:function(){
  console.log('出錯(cuò)了！');
  }
 });
 }
 $(function(){
 //導(dǎo)入層的js
 $("#import_schedule").bind('click', function(){
  $("#gridImport_body").html("");
  $("#import").modal("show");
 }); 
 //導(dǎo)入對(duì)應(yīng)的函數(shù)
 $('#file_upload').uploadify({
  'swf': '/public/uploadify/uploadify.swf', //FLash文件路徑
  'buttonText': '瀏 覽',    //按鈕文本
  'uploader': '{{url("lazy/uploadExcel")}}', //后臺(tái)處理程序的路徑
  'queueID': 'fileQueue',    //隊(duì)列的ID
  'queueSizeLimit': 1,    //隊(duì)列最多可上傳文件數(shù)量，默認(rèn)為999
  'auto': false,     //選擇文件后是否自動(dòng)上傳，默認(rèn)為true
  'multi': false,     //是否為多選，默認(rèn)為true
  'removeCompleted': true,   //是否完成后移除序列，默認(rèn)為true
  'fileSizeLimit': '10MB',   //單個(gè)文件大小，0為無(wú)限制，可接受KB,MB,GB等單位的字符串值
  'fileTypeDesc': 'Excel Files',   //文件描述
  'fileTypeExts': '*.xlsx',   //上傳的文件后綴過(guò)濾器
  'onQueueComplete': function (event, data) { //所有隊(duì)列完成后事件
  //業(yè)務(wù)處理代碼
  //提示用戶Excel格式是否正常，如果正常加載數(shù)據(jù)
  var guid = $("#AttachGUID").val();
  $.ajax({
   url: '/lazy/CheckExcelColumns?type=check&guid=' + guid,
   type: 'get',
   dataType: 'json',
   success: function (data) {  
   if (data.status) {
    // InitGrid(); //重新刷新表格數(shù)據(jù)
    $.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(每次不同,用時(shí)間戳代替)
  $("#gridImport_body").html("");
  //動(dòng)態(tài)傳參數(shù)
  var guid = $("#AttachGUID").val();
　　　　　　　　　var salt = 'test' ; //md5加密輔助串
  var token = hex_md5(salt+guid) ; //校驗(yàn)參數(shù)
  $("#file_upload").uploadify(
   "settings", 
   'formData', { 
     'folder': '數(shù)據(jù)導(dǎo)入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>

后端代碼：

//上傳文件處理
 public function uploadExcelAction()
 { 
 $targetFolder = '/public/uploadFile/'; // Relative to the root
　　　　 $salt = 'test';
 $verifyToken = md5($test . $_POST['guid']);
 if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
  $tempFile = $_FILES['Filedata']['tmp_name'];
  $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
  $targetFile = rtrim($targetPath,'/') . '/' . $verifyToken.'.xlsx';

  $fileTypes = array('xlsx'); 
  $fileParts = pathinfo($_FILES['Filedata']['name']);
  if (in_array($fileParts['extension'],$fileTypes)) {
  move_uploaded_file($tempFile,$targetFile);
  echo '1';
  } else {
  echo 'Invalid file type.';
  }
 }else{
  echo 'Invalid params.';
 }
 die;
 }

處理excel數(shù)據(jù)，就說(shuō)兩個(gè)關(guān)鍵點(diǎn)：取單元格的值和背景色

　　　$objReader  = \PHPExcel_IOFactory::createReader('Excel2007');
   $objPHPExcel = $objReader->load($targetFile);
   $sheet    = $objPHPExcel->getSheet();
   $sheetRows  = $sheet->getHighestDataRow();                      // 取得總行數(shù)
   $sheetColumns = PHPExcel_Cell::columnIndexFromString($sheet->getHighestDataColumn()); //列數(shù)

//讀取單元格
    $value   = $objPHPExcel->getActiveSheet()->getCell($columns[$k] . $j)->getValue(); //獲取每個(gè)單元格的值
    $fillColor = $objPHPExcel->getActiveSheet()->getStyle($columns[$k] . $j)->getFill()->getStartColor()->getARGB(); //背景色

下面附圖：

導(dǎo)入界面：

excel表：

以上是“基于yaf框架和uploadify插件如何導(dǎo)入excel文件實(shí)現(xiàn)查看并保存數(shù)據(jù)的功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！