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 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
Nov 14 PHP
php递归获取目录内文件(包含子目录)封装类分享
Dec 25 PHP
PHP实现定时执行任务的方法
Oct 05 PHP
php 7新特性之类型申明详解
Jun 06 PHP
PHP读取word文档的方法分析【基于COM组件】
Aug 01 PHP
浅谈Laravel队列实现原理解决问题记录
Aug 19 PHP
PHP使用pdo实现事务处理操作示例
Sep 05 PHP
PHP的PDO事务与自动提交
Jan 24 PHP
PHP删除数组中特定元素的两种方法
Feb 28 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
May 26 PHP
PHP底层运行机制与工作原理详解
Jul 31 PHP
Nginx+php配置文件及原理解析
Dec 09 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php里array_work用法实例分析
2015/07/13 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python求导数的方法
2015/05/09 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
python pygame模块编写飞机大战
2018/11/20 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
基于python代码批量处理图片resize
2020/06/04 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
大学生思想汇报范文
2013/12/31 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
宇宙与人观后感
2015/06/05 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
入党心得体会
2019/06/20 职场文书