1、前台上传页面代码

                  <divclass="clearfix mywebsite-nodata"><divid="show"><formaction="<?=site_url('user/upload')?>"target="ifmupload"id="myform"method="post"accept-charset="utf-8"enctype="multipart/form-data"> <inputtype="file"name="userfile" /><br/><inputtype="button"value="上传数据"id="btnupload" /></form><iframename="ifmupload"class="button"style="display: none;"></iframe></div><labelid="lblmsg"></label><divid="p"class="easyui-progressbar"style="width:400px;"></div><inputtype="button"class="buttonicon-add"id="doupload"style="display: none;"value="daoru"/></div>

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

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

functionupload(){$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中去。代码如下

    functionexcel_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 显示进度条的实现方式相关推荐

  1. android显示服务器端文件夹,Android上传文件到服务端并显示进度条

    最近在做上传文件的服务,简单看了网上的教程.结合实践共享出代码. 由于网上的大多数没有服务端的代码,这可不行呀,没服务端怎么调试呢. Ok,先上代码. Android 上传比较简单,主要用到的是 Ht ...

  2. 理清fineuploader无刷新上传的一些事

    1.fineuploader是一款不依赖与jquery的异步无刷新上传组件,fineuploader采用ajax方式实现对文件上传,返回值都是以json的格式,对后台服务器操作和前端dom对象一些操作 ...

  3. jQuery无刷新上传学习心得

    记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...

  4. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  5. 利用iframe无刷新上传文件的坑

    利用iframe无刷新上传文件的坑 原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用for ...

  6. jquery.form 和MVC4做无刷新上传DEMO

    jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...

  7. jQuery+php+ajax实现无刷新上传文件功能

    2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...

  8. ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用

    我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...

  9. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

最新文章

  1. 二叉查找树python实现
  2. 大数据笔记(六)——HDFS的底层原理:JAVA动态代理和RPC
  3. html入门学习(一)
  4. MySQL数据库序列的作用_MySQL数据库:序列使用
  5. 功能Java示例 第1部分–从命令式到声明式
  6. autocad2014 菜单栏 闪退_AutoCAD2014闪退的原因与处理办法 1打开就闪退怎样办
  7. C语言实现一维多项式求值
  8. 调用servlet java_请问调用servlet并从JavaScript调用Java代码以及参数
  9. srpc 高性能通用 RPC 框架
  10. 手把手教你搭建LyncServer2013之部署边缘服务器(七)
  11. java.io.Serializab接口
  12. keil中C语言取反操作结果是32位数
  13. 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 F Trig Function(切比雪夫多项式)
  14. 单片机实验四 矩阵键盘实验
  15. html5使用table制作表单
  16. icoud邮箱无法连接服务器,icloud邮箱如何开启imap
  17. 什么是视频编码 编解码技术及压缩技术
  18. (面向对象)员工信息管理系统 1.当有新员工的时候将员工加入到管理系统 2.可以根据工号实现对该员工信息查询 3.可以现实查看所有员工信息 4.可以修改员工的薪水
  19. CmakeList中加入OpenCV编译项
  20. 网线、WiFi、路由器的介绍选择

热门文章

  1. Linux桌面自动挂载,ubuntu分区自动挂载
  2. java求多项式回归_多项式回归(Polynomial Regression)(附代码)
  3. Error: org.apache.hadoop.hdfs.BlockMissingException: Could not obtain block: BP-965200530-172.21.
  4. 【IT笔试面试题整理】判断链表是否存在环路,并找出回路起点
  5. 一段 关于 观察者 和 唯识 的文字 (转帖摘录)
  6. 利用VLC搭建组播流服务器
  7. 无人银行真来了,未来80%的银行人估计得失业!
  8. 大学生每个月1500元的生活费,够吗?
  9. qt开发环境 - 简易二进制文件打开,串口自发自收
  10. fluent python 第二版_Fluent Python 笔记(二):序列基础