PHP大文件切割上传并带进度条功能示例


Posted in PHP onJuly 01, 2019

本文实例讲述了PHP大文件切割上传并带进度条功能。分享给大家供大家参考,具体如下:

前面一篇介绍了PHP大文件切割上传功能,这里再来进一步讲解PHP大文件切割上传并带进度条功能。

项目结构图:

PHP大文件切割上传并带进度条功能示例

14-slice-upload-fix.html文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>大文件切割上传带进度条</title>
  <link rel="stylesheet" href="">
<script>
var xhr = new XMLHttpRequest();//xhr对象
var clock = null;
function selfile(){
  clock = window.setInterval(sendfile,1000);
}
var sendfile = (function (){
  const LENGTH = 1024 * 1024 * 10;//每次上传的大小
  var start = 0;//每次上传的开始字节
  var end = start + LENGTH;//每次上传的结尾字节
  var sending = false;//表示是否正在上传
  var fd = null;//创建表单数据对象
  var blob = null;//二进制对象
  var percent = 0;
  return (function (){
    //如果有块正在上传,则不进行上传
    if(sending == true){
      return;
    }
    var file = document.getElementsByName('video')[0].files[0];//文件对象
    //如果sta>file.size,就结束了
    if(start > file.size){
      clearInterval(clock);
      return;
    }
    blob = file.slice(start,end);//根据长度截取每次需要上传的数据
    fd = new FormData();//每一次需要重新创建
    fd.append('video',blob);//添加数据到fd对象中
    up(fd);
    //重新设置开始和结尾
    start = end;
    end = start + LENGTH;
    sending = false;//上传完了
    //显示进度条
    percent = 100 * start/file.size;
    if(percent>100){
      percent = 100;
    }
    document.getElementById('bar').style.width = percent + '%';
    document.getElementById('bar').innerHTML = parseInt(percent)+'%';
  });
})();
function up(fd){
  xhr.open('POST','13-slice-upload.php',false);
  xhr.send(fd);
}
</script>
<style>
  #progress{
    width:500px;
    height:30px;
    border:1px solid green;
  }
  #bar{
    width:0%;
    height:100%;
    background-color: green;
  }
</style>
</head>
<body>
  <h1>大文件切割上传带进度条</h1>
  <div id="progress">
    <div id="bar"></div>
  </div>
  <input type="file" name="video" onchange="selfile();" />
</body>
</html>

13-slice-upload.php文件:

<?php
/**
 * 大文件切割上传,把每次上传的数据合并成一个文件
 * @author webbc
 */
$filename = './upload/upload.wmv';//确定上传的文件名
//第一次上传时没有文件,就创建文件,此后上传只需要把数据追加到此文件中
if(!file_exists($filename)){
  move_uploaded_file($_FILES['video']['tmp_name'],$filename);
}else{
  file_put_contents($filename,file_get_contents($_FILES['video']['tmp_name']),FILE_APPEND);
}
?>

运行结果图:

PHP大文件切割上传并带进度条功能示例

希望本文所述对大家PHP程序设计有所帮助。

PHP 相关文章推荐
PHP5.0对象模型探索之抽象方法和抽象类
Sep 05 PHP
php select,radio和checkbox默认选择的实现方法
May 15 PHP
PHP MySQL应用中使用XOR运算加密算法分享
Aug 28 PHP
PHP和.net中des加解密的实现方法
Feb 27 PHP
ThinkPHP中自定义错误页面和提示页面实例
Nov 22 PHP
php简单图像创建入门实例
Jun 10 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
Sep 25 PHP
CodeIgniter连贯操作的底层原理分析
May 17 PHP
php获取一定范围内取N个不重复的随机数
May 28 PHP
PHP处理CSV表格文件的常用操作方法总结
Jul 01 PHP
注意!PHP 7中不要做的10件事
Sep 18 PHP
php curl 模拟登录并获取数据实例详解
Dec 22 PHP
PHP大文件切割上传功能实例分析
Jul 01 #PHP
PHP使用反向Ajax技术实现在线客服系统详解
Jul 01 #PHP
PHP封装cURL工具类与应用示例
Jul 01 #PHP
PHP session垃圾回收机制实例分析
Jun 28 #PHP
PHP常用的类封装小结【4个工具类】
Jun 28 #PHP
php实现网页上一页下一页翻页过程详解
Jun 28 #PHP
php输出控制函数和输出函数生成静态页面
Jun 27 #PHP
You might like
php 验证码制作(网树注释思想)
2009/07/20 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
基于jquery的图片懒加载js
2010/06/30 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
js实现在字符串中提取数字
2013/11/05 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
JS函数重载的解决方案
2014/05/13 Javascript
javascript 数组操作详解
2015/01/29 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
浅析vue-router原理
2018/10/19 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
mac使用python识别图形验证码功能
2020/01/10 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
数学系个人求职信范文
2014/01/30 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
党风廉政承诺书
2014/03/27 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
高考1977观后感
2015/06/04 职场文书
Python利用folium实现地图可视化
2021/05/23 Python