基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能

思路：

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

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

3.然后前端，上传附件成功后，进行请求后端，读取数据，后端接口对应将附件数据读取出来，前端进行显示（ajax请求）；

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

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

代码如下：（关键代码）

前端对应html：

<!–导入数据操作层–>

<divid="import"class="modalfadebs-modal-lg"tabindex="-1"role="dialog"aria-labelledby="mymodallabel"aria-hidden="true">

<divclass="modal-dialogmodal-lg">

<divclass="modal-content">

<divclass="modal-headerbg-primary">

<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true"></button>

<h4class="modal-title">文件导入</h4>

</div>

<divclass="modal-body">

<divstyle="text-align:right;padding:5px">

<ahref="/public/uploadfile/人员资源动态匹配表-模板.xlsx"onclick="javascript:;">

<imgalt="人员资源动态匹配表-模板"src="/public/images/excel.jpg"/>

<spanstyle="font-size:larger;font-weight:200;color:red">人员资源动态匹配表-模板.xlsx</span>

</a>

</div>

<hr/>

<formid="ffimport"method="post">

<divtitle="excel导入操作"style="padding:5px"data-options="iconcls:'icon-key'">

<inputclass="easyui-validatebox"type="hidden"id="attachguid"name="attachguid"/>

<inputid="file_upload"name="file_upload"type="file"multiple="multiple">

<ahref="javascript:;"class="btnbtn-primary"id="btnupload"onclick="javascript:$('#file_upload').uploadify('upload','*')">上传</a>

<ahref="javascript:;"class="btnbtn-default"id="btncancelupload"onclick="javascript:$('#file_upload').uploadify('cancel','*')">取消</a>

<divid="filequeue"class="filequeue"></div>

<br/>

<hrstyle="width:98%"/>

<divid="div_files"></div>

<br/>

</div>

</form>

<!–数据显示表格–>

<tableid="gridimport"class="tabletable-stripedtable-borderedtable-hover"cellpadding="0"cellspacing="0"border="0"class="display"width="100%">

<theadid="gridimport_head">

<tr>

<th>项目名称</th>

<th>项目编号</th>

<th>功能</th>

<th>人员</th>

<th>日期</th>

</tr>

</thead>

<tbodyid="gridimport_body"></tbody>

</table>

</div>

<divclass="modal-footer">

<buttontype="button"class="btnbtn-default"data-dismiss="modal"id="close_window">关闭</button>

<buttontype="button"class="btnbtn-primary"onclick="javascript:saveimport();">保存</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>

后端代码：

基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能

相关文章

快网idc优惠网

相关文章

微信

快网idc优惠网

QQ交流群