无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式

1、前台上传页面代码

　　　　　　　　　　　　　　　　　　<div class="clearfix mywebsite-nodata">
<div id="show">
<form action="<?=site_url('user/upload')?>" target="ifmupload" id="myform" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" name="userfile" /><br />
<input type="button" value="上传数据" id="btnupload" />
</form>
<iframe name="ifmupload" class="button" style="display: none;"></iframe>

</div>
<label id="lblmsg"></label>
<div id="p" class="easyui-progressbar" style="width:400px;"></div>
<input type="button" class="buttonicon-add" id="doupload" style="display: none;" value="daoru"/>
</div>

利用iframe来实现无刷新上传，其实是将form得提交加了一个target='ifmupload' 即iframe的id。

2、控制器中关于上传的代码

function upload(){
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png|xls';
$config['max_size'] = '10002';
$config['encrypt_name']=TRUE;

$this->load->library('upload',$config);

if($this->upload->do_upload()){

$filedata=$this->upload->data();//文件上传成功数据

$this->session->set_userdata('status',1);//利用session记录上传状态
$this->session->set_userdata('uploadfilename',$filedata['file_name']);//利用session记录上传文件名

}else{

$this->session->set_userdata('status',0);
}

}

3、Excel文件上传后，需要使用PHPExcel将数据导入到mysql中去。代码如下

function excel_to_mysql(){

$progress['sessionid']=$this->session->userdata('session_id');//获得上传文件的session_id
$progress['progressbar']=1;//导入数据进度默认为1
$this->load->model('muser');//载入model
$this->muser->insert_progressbar($progress);//利用数据库记录导入进度
$where['sessionid']=$progress['sessionid'];//更新条件为session_id

$oldIncludePath=get_include_path();//设置环境变量
set_include_path(APPPATH.'libraries/PHPExcel');//将PHPExcel类放置在application/libraries文件夹中
include_once'PHPExcel.php';//导入PHPExcel.php
include_once'PHPExcel/IOFactory.php';//导入
include_once'PHPExcel/Reader/Excel5.php';//导入

$PHPExcel=new PHPExcel();//实例化一个PHPExcel对象

$reader=new PHPExcel_Reader_Excel5();//实例化一个读取excel对象

$filePath='./uploads/'.$this->session->userdata('uploadfilename');//上传文件地址及文件名称

$PHPExcel=$reader->load($filePath);//利用读取对象读取excel文件给PHPExcel对象

$sheet=$PHPExcel->getSheet(0);//获得sheet

$maxRow=$sheet->getHighestRow();//获得数据最大行数
$maxColumn=$sheet->getHighestColumn();//获得数据最大列数

$this->load->model('muser');//载入model
for($row=1;$row<=$maxRow;$row++){//遍历excel数据
for($column='A';$column<=$maxColumn;$column++){
switch($column){
case 'A':
$data['xuehao']=$sheet->getCell($column.$row)->getValue();//根据列名+行名方式取得单元格值
break;
case 'B':
$data['xingming']=$sheet->getCell($column.$row)->getValue();
break;
case 'C':
$data['zuohao']=$sheet->getCell($column.$row)->getValue();
break;
case 'D':
$data['mihao']=$sheet->getCell($column.$row)->getValue();
break;
default:
break;
}
}
$data['shijian']=date('Y-m-d');
$this->muser->insert_into_mysql($data);
$temp['progressbar']=ceil(($row/$maxRow)*100);//取得百分比值
$this->muser->update_progressbar($temp,$where);//将百分比值写入至数据库
/*将Excel数据写入mysql
if($this->muser->insert_into_mysql($data)==1){
//var_dump($data);
//echo '<br />';
echo $row.'insert into mysql success';
}*/

}
set_include_path($oldIncludePath);//还原环境变量地址

//$my['status']='ok';
//echo json_encode($my); 导入成功返回json数据
}

4、三个供web端ajax方式取得状态值函数

function get_status(){//供Web端检测是否上传完毕

$data['status']=$this->session->userdata('status');
$data['uploadfile']=$this->session->userdata('uploadfilename');

echo json_encode($data);

}

function get_progress(){//供web端ajax方式取得导入进度值
$where['sessionid']=$this->session->userdata('session_id');
$this->load->model('muser');
$mypro=$this->muser->select_progressbar($where);
$my['progresstime']=$mypro->progressbar;
echo json_encode($my);
}

function destory_progress(){//导入成功后 从数据库中删除该文件导入进度
$where['sessionid']=$this->session->userdata('session_id');
$this->load->model('muser');
$this->muser->delete_progressbar($where);
}

5、javascript代码

<script type="text/javascript">
$(document).ready(function(){
var startid;//定义一个上传结束标示
var exportid;//定义一个导入结束标示 供setTimeout setInterval使用
$('#btnupload').click(function(){
$('#myform').submit();

startid=setTimeout(getstatus,500);//检测是否上传结束 此处非循环应采用setInterval比较好

});

$('#doupload').click(function(){
$.post('<?=site_url('user/excel_to_mysql')?>');
exportid=setInterval(getExportStatus,200);//循环检测都如比例值

});

function getExportStatus(){//ajax取得比例值
var url='<?=site_url('user/get_progress')?>';
$.post(url,function(jsonmm){
if(jsonmm.progresstime<=100){
$('#p').show();
$('#p').progressbar('setValue',jsonmm.progresstime);//更改进度条值
}

if(jsonmm.progresstime==100){//当进度条慢 删除数据库中记录过程进度数据
$.post('<?=site_url('user/destory_progress')?>')
clearInterval(exportid);
}

},'json');
}
function getstatus(){//ajax检测文件文件是否上传完毕
var url='<?=site_url('user/get_status')?>';
$.post(url,function(json){
if(json.status==1){
$('#lblmsg').html('upload successful');
$('#show').hide();
$('#doupload').show();
clearTimeout(startid);//完毕就结束循环
}
if(json.status==0){
$('#lblmsg').html('error');
clearTimeout(startid);
}
},'json');
}
})
</script>