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 相关文章推荐
用Zend Encode编写开发PHP程序
Feb 21 PHP
10个可以简化php开发过程的MySQL工具
Apr 11 PHP
php Smarty模板生成html文档的方法
Apr 12 PHP
php中cookie的使用方法
Mar 29 PHP
destoon数据库表说明汇总
Jul 15 PHP
php版微信公众平台开发之验证步骤实例详解
Sep 23 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
Nov 21 PHP
Zend Framework校验器Zend_Validate用法详解
Dec 09 PHP
PHP实现对图片的反色处理功能【测试可用】
Feb 01 PHP
为何说PHP引用是个坑,要慎用
Apr 02 PHP
Laravel框架路由设置与使用示例
Jun 12 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
Sep 05 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后台的Android新闻浏览客户端
2016/05/23 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
vue3.0 上手体验
2020/09/21 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
用javascript实现倒计时效果
2021/02/09 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python 多线程重启方法
2019/02/18 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
解决pytorch DataLoader num_workers出现的问题
2020/01/14 Python
Django 解决由save方法引发的错误
2020/05/21 Python
有模特经验的简历自我评价
2013/09/19 职场文书
生物技术毕业生自荐信
2013/10/23 职场文书
《木笛》教学反思
2014/03/01 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers