欢迎来到 黑吧安全网 聚焦网络安全前沿资讯,精华内容,交流技术心得!

如何基于yaf框架和uploadify查看并保存数据

来源:本站整理 作者:佚名 时间:2017-04-07 TAG: 我要投稿

思路:
1.首先,页面前端,上传附件,提交给后台,并带一个随机性的参数(可以用时间戳);
2.后端接收附件,做一系列的逻辑处理,无误后,将对应的文件存储在上传的目录下;
3.然后前端,上传附件成功后,进行请求后端,读取数据,后端接口对应将附件数据读取出来,前端进行显示(ajax请求);
4.前端展示数据,用户对数据检测无误,点击保存(ajax请求后端保存代码的接口),当然也可以有选择性的选择某些数据记录进行保存,楼主这里做的是全部保存(后端处理接口,自动过滤重复数据);
5.拿到对应的所需有用数据即可, 对应的excel表格,因为需要获取到人员排期数据,所以楼主是通过判断单元格的背景色来识别
代码如下:(关键代码)
前端 对应html:
 id="import" class="modal fade bs-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  class="modal-dialog modal-lg">
  class="modal-content">
  class="modal-header bg-primary">
  type="button" class="close" data-dismiss="modal" aria-hidden="true">
  class="modal-title">文件导入
 
  class="modal-body">
  style="text-align:right;padding:5px">
   href="/public/uploadFile/人员资源动态匹配表-模板.xlsx" onclick="javascript:;">
   alt="人员资源动态匹配表-模板" src="/public/images/excel.jpg?www.myhack58.com" />
   style="font-size:larger;font-weight:200;color:red">人员资源动态匹配表-模板.xlsx
 
 
 
  id="ffImport" method="post">
   title="Excel导入操作" style="padding: 5px" data-options="iconCls:'icon-key'">
   class="easyui-validatebox" type="hidden" id="AttachGUID" name="AttachGUID" />
   id="file_upload" name="file_upload" type="file" multiple="multiple"> 
   href="javascript:;" class="btn btn-primary" id="btnUpload" onclick="javascript: $('#file_upload').uploadify('upload', '*')">上传
   href="javascript:;" class="btn btn-default" id="btnCancelUpload" onclick="javascript: $('#file_upload').uploadify('cancel', '*')">取消
   id="fileQueue" class="fileQueue">
   /> 
   style="width:98%" /> 
   id="div_files">
   /> 
 
 
 
  id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
   id="gridImport_head">
 
  项目名称
  项目编号
  功 能
  人 员
  日 期
 
 
   id="gridImport_body">
 
 
  class="modal-footer">
  type="button" class="btn btn-default" data-dismiss="modal" id="close_window">关闭
  type="button" class="btn btn-primary" onclick="javascript:SaveImport();">保存
 
 
 
对应js代码:
 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

[1] [2]  下一页

【声明】:黑吧安全网(http://www.myhack58.com)登载此文出于传递更多信息之目的,并不代表本站赞同其观点和对其真实性负责,仅适于网络安全技术爱好者学习研究使用,学习中请遵循国家相关法律法规。如有问题请联系我们,联系邮箱admin@myhack58.com,我们会在最短的时间内进行处理。
  • 最新更新
    • 相关阅读
      • 本类热门
        • 最近下载