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>

?

?

轉載于:https://www.cnblogs.com/huilange/archive/2012/12/24/2831659.html

總結

以上是生活随笔為你收集整理的无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。