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 相关文章推荐
用PHP连mysql和oracle数据库性能比较
Oct 09 PHP
从一个不错的留言本弄的mysql数据库操作类
Sep 02 PHP
PHP COOKIE设置为浏览器进程
Jun 21 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
Jun 03 PHP
php下使用strpos需要注意 === 运算符
Jul 17 PHP
PHP通过header实现文本文件下载的代码
Aug 08 PHP
php设计模式 Prototype (原型模式)代码
Jun 26 PHP
php向js函数传参的几种方法
Aug 10 PHP
PHP多线程类及用法实例
Dec 03 PHP
给ECShop添加最新评论
Jan 07 PHP
php实现的简单数据库操作Model类
Nov 16 PHP
微信公众号OAuth2.0网页授权问题浅析
Jan 21 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
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
2015/11/22 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery实现的多张图无缝滚动效果【测试可用】
2016/09/12 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
Python中random模块用法实例分析
2015/05/19 Python
Python实战之制作天气查询软件
2019/05/14 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python3的pip路径在哪
2020/06/23 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
Python面试题集
2012/03/08 面试题
餐饮业员工工作决心书
2014/03/11 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
家长会欢迎标语
2014/06/24 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
房屋买卖协议样本
2014/11/16 职场文书
员工自我评价范文
2015/03/11 职场文书
vscode内网访问服务器的方法
2022/06/28 Servers