无刷新上传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="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>