无刷新上传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.phpinclude_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');//载入modelfor($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数据写入mysqlif($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>