无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式
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 显示进度条的实现方式相关推荐
- android显示服务器端文件夹,Android上传文件到服务端并显示进度条
最近在做上传文件的服务,简单看了网上的教程.结合实践共享出代码. 由于网上的大多数没有服务端的代码,这可不行呀,没服务端怎么调试呢. Ok,先上代码. Android 上传比较简单,主要用到的是 Ht ...
- 理清fineuploader无刷新上传的一些事
1.fineuploader是一款不依赖与jquery的异步无刷新上传组件,fineuploader采用ajax方式实现对文件上传,返回值都是以json的格式,对后台服务器操作和前端dom对象一些操作 ...
- jQuery无刷新上传学习心得
记得刚离开大学,进入目前这家公司不到一个月时,有一位前辈给我们当时的新人讲了下JS无刷新上传的相关知识. 在此之前,一直都是在使用C#提供的服务器上传控件FileUpload,但是每次使用时,都会刷新 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- 利用iframe无刷新上传文件的坑
利用iframe无刷新上传文件的坑 原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用for ...
- jquery.form 和MVC4做无刷新上传DEMO
jquery.form 和MVC4做无刷新上传DEMO HTML: <script src="~/Scripts/jquery-1.10.2.min.js"></ ...
- jQuery+php+ajax实现无刷新上传文件功能
2019独角兽企业重金招聘Python工程师标准>>> jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码: &l ...
- ajax上传文件表单,图片、文件无刷新上传,jquery.form.js的使用
我们在进行一些web开发时,有时会需要上传文件,图片等等的功能.这篇文章记录一下我实现用ajax实现无刷新上传图片的方法. 我们先要了解一下ajax,在前后端分离的开发环境中ajax被广泛的用原来前后 ...
- 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
最新文章
- 二叉查找树python实现
- 大数据笔记(六)——HDFS的底层原理:JAVA动态代理和RPC
- html入门学习(一)
- MySQL数据库序列的作用_MySQL数据库:序列使用
- 功能Java示例 第1部分–从命令式到声明式
- autocad2014 菜单栏 闪退_AutoCAD2014闪退的原因与处理办法 1打开就闪退怎样办
- C语言实现一维多项式求值
- 调用servlet java_请问调用servlet并从JavaScript调用Java代码以及参数
- srpc 高性能通用 RPC 框架
- 手把手教你搭建LyncServer2013之部署边缘服务器(七)
- java.io.Serializab接口
- keil中C语言取反操作结果是32位数
- 2017 ACM-ICPC 亚洲区(西安赛区)网络赛 F Trig Function(切比雪夫多项式)
- 单片机实验四 矩阵键盘实验
- html5使用table制作表单
- icoud邮箱无法连接服务器,icloud邮箱如何开启imap
- 什么是视频编码 编解码技术及压缩技术
- (面向对象)员工信息管理系统 1.当有新员工的时候将员工加入到管理系统 2.可以根据工号实现对该员工信息查询 3.可以现实查看所有员工信息 4.可以修改员工的薪水
- CmakeList中加入OpenCV编译项
- 网线、WiFi、路由器的介绍选择
热门文章
- Linux桌面自动挂载,ubuntu分区自动挂载
- java求多项式回归_多项式回归(Polynomial Regression)(附代码)
- Error: org.apache.hadoop.hdfs.BlockMissingException: Could not obtain block: BP-965200530-172.21.
- 【IT笔试面试题整理】判断链表是否存在环路,并找出回路起点
- 一段 关于 观察者 和 唯识 的文字 (转帖摘录)
- 利用VLC搭建组播流服务器
- 无人银行真来了,未来80%的银行人估计得失业!
- 大学生每个月1500元的生活费,够吗?
- qt开发环境 - 简易二进制文件打开,串口自发自收
- fluent python 第二版_Fluent Python 笔记(二):序列基础