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 相关文章推荐
珊瑚虫IP库浅析
Feb 15 PHP
PHP 查找字符串常用函数介绍
Jun 07 PHP
php更新mysql后获取影响的行数发生异常解决方法
Mar 28 PHP
php 判断是否是中文/英文/数字示例代码
Sep 30 PHP
windows中为php安装mongodb与memcache
Jan 06 PHP
PHP的Yii框架的常用日志操作总结
Dec 08 PHP
ThinkPHP中html:list标签用法分析
Jan 09 PHP
Laravel搭建后台登录系统步骤详解
Jul 26 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
Jul 19 PHP
php实现和c#一致的DES加密解密实例
Jul 24 PHP
PHP实现统计所有字符在字符串中出现次数的方法
Oct 17 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
Dec 13 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与浏览器缓存的分析
2013/06/03 PHP
实例讲解php实现多线程
2019/01/27 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
2019/01/18 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
Python树莓派学习笔记之UDP传输视频帧操作详解
2019/11/15 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
关于保护环境的标语
2014/06/09 职场文书
市场策划求职信
2014/08/07 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
七年级作文之冬景
2019/11/07 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
CSS的calc函数用法小结
2022/06/25 HTML / CSS