php实现简单的上传进度条


Posted in PHP onNovember 17, 2015

Web上传文件的三种解决方案分享给大家:

php实现简单的上传进度条

这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传。

表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值:

 php实现简单的上传进度条

在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是uploadprogress,点击地址可以下载到php相应版本的dll。安装php_uploadprogress.dll扩展,重启apache。

php实现简单的上传进度条

进度条实现原理:

php实现简单的上传进度条

这里用到了一个iframe无刷新上传文件的方法。

php实现简单的上传进度条

上传完成后的样子如图:

<body>
  <div style="padding:20px">
   <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload">
    <iframe name="iframeUpload" width="400" height="400" frameborder='1'></iframe>
    <input type="hidden" name="UPLOAD_IDENTIFIER" value="1" />
    <input id="file1" name="file1" type="file"/> 
    <input value="上传" type="submit" onclick="startProgress()"/> 
   </form>
  </div>
  <div style="width: 500px; height: 20px;border:1px solid red"> 
   <div style="position: relative; height: 20px; background-color: purple; width: 0%;" class="barinner"></div>
  </div>
  <div id='showNum'></div>
  <div class="prbar">
   <div class="prpos barinner"></div>
  </div>
 </body>

上面的HTML代码中要注意下UPLOAD_IDENTIFIER,这个是用来定位查看哪个文件的上传进度的。我这里就写死为一个1,大家可以写成一个php生成的随机数。下面是JS脚本:

var proNum=0; 
  var loop=0; 
  var progressResult = ""; 
  var interval; 
  function sendURL() { 
   $.ajax({ 
    type : 'GET', 
    url : "getprogress.php", 
    async : true, 
    cache : false, 
    dataType : 'json',
    data: "progress_key=" + $('input[name=UPLOAD_IDENTIFIER]').val(),
    success : function(e) { 
     proNum=parseInt(e); 
     if(e){ 
      $('.barinner').css('width', proNum+"%");
      $('#showNum').html(proNum+"%");
      setTimeout("getProgress()", 200); 
   
     }else{ 
      if(interval == 1){ 
       $('.barinner').css('width', "100%");
       $('#showNum').html("100%");
      } 
     }
    } 
   }); 
  } 
  function getProgress(){ 
   loop++; 
   sendURL(); 
  } 
  function startProgress(){ 
   interval = 1;
   $('.barinner').css('width', proNum+"%"); 
   $('#showNum').html(proNum+"%");
  setTimeout("getProgress()", 500); 
  }

下面是getprogress.php文件中的内容:

<?php 
 if (function_exists("uploadprogress_get_info")) {
  $info = uploadprogress_get_info($_GET['progress_key']);
  if(!empty($info)){
   if(($info['bytes_uploaded'] < $info['bytes_total']) && !empty($info['bytes_uploaded']) && !empty($info['bytes_total'])){
    $proNum = floor(($info['bytes_uploaded']/$info['bytes_total'])*100);  
   }else{
    $proNum = 100;
   }
   echo $proNum;
  }else{
   echo 0;
  }
 }

在上传完成后,我展示了两种进度条的CSS,第二种是用最新的CSS3写的。用到了一些CSS3的动画属性。

php实现简单的上传进度条

.prbar {
  margin:5px;
  width:500px;
  background-color:#dddddd;
  overflow:hidden;
  
  /* 边框效果 */
  border: 1px solid #bbbbbb;
  -moz-border-radius: 15px;
  border-radius: 15px;
    
  /* 为进度条增加阴影效果 */
  -webkit-box-shadow: 0px 2px 4px #555555;
  -moz-box-shadow: 0px 2px 4px #555555;
  box-shadow: 0px 2px 4px #555555;   
 }
 /* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
 doesnotexist:-o-prefocus, .prbar {
 border-radius:0px;
 }
 .prpos {
  width:0%;
  height:30px;
  background-color:#3399ff;
  border-right:1px solid #bbbbbb;
  /* CSS3 进度条渐变 */
  transition: width 2s ease;
  -webkit-transition: width 0s ease;
  -o-transition: width 0s ease;
  -moz-transition: width 0s ease;
  -ms-transition: width 0s ease;
  /* CSS3 Stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
  background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  background-size: 40px 40px;
  /* Background stripes animation */
  animation: bganim 3s linear 2s infinite;
  -moz-animation: bganim 3s linear 2s infinite;
  -webkit-animation: bganim 3s linear 2s infinite;
  -o-animation: bganim 3s linear 2s infinite;
  -ms-animation: bganim 3s linear 2s infinite;
 }
 @keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-moz-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-webkit-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-o-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }
 @-ms-keyframes bganim {
  from {background-position:0px;} to { background-position:40px;}
 }

以上就是本文的全部内容,希望对大家的学习有所帮助。

PHP 相关文章推荐
php 论坛采集程序 模拟登陆,抓取页面 实现代码
Jul 09 PHP
php foreach 使用&amp;(与运算符)引用赋值要注意的问题
Feb 16 PHP
PHP程序员最常犯的11个MySQL错误小结
Nov 20 PHP
PHP使用CURL获取302跳转后的地址实例
May 04 PHP
php中数字0和空值的区别分析
Jun 05 PHP
PHP编程入门的基本语法知识点总结
Jan 26 PHP
PHP开发制作一个简单的活动日程表Calendar
Jun 20 PHP
关于Laravel Route重定向的一个注意点
Jan 16 PHP
PHP编程实现csv文件导入mysql数据库的方法
Apr 29 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
Nov 17 PHP
php-fpm服务启动脚本的方法
Apr 27 PHP
PHP使用openssl扩展实现加解密方法示例
Feb 20 PHP
PHP安装threads多线程扩展基础教程
Nov 17 #PHP
超详细的php用户注册页面填写信息完整实例(附源码)
Nov 17 #PHP
教大家制作简单的php日历
Nov 17 #PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
Nov 16 #PHP
PHP Yii框架之表单验证规则大全
Nov 16 #PHP
Yii2.0高级框架数据库增删改查的一些操作
Nov 16 #PHP
yii添删改查实例
Nov 16 #PHP
You might like
新手学习PHP的一些基础知识分享
2011/07/27 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
火山动力Java笔试题
2014/06/26 面试题
个人自我评价分享
2013/12/20 职场文书
《童年》教学反思
2014/02/18 职场文书
小学生学习保证书
2015/02/26 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang
JavaScript实现班级抽签小程序
2021/05/19 Javascript
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL