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 相关文章推荐
adodb与adodb_lite之比较
Dec 31 PHP
php存储过程调用实例代码
Feb 03 PHP
测试php函数的方法
Nov 13 PHP
php查找字符串出现次数的方法
Dec 01 PHP
Yii的CDbCriteria查询条件用法实例
Dec 04 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
Jul 03 PHP
PHP 实现页面静态化的几种方法
Jul 23 PHP
PHP让数组中有相同值的组成新的数组实例
Dec 31 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
Jun 08 PHP
Yii2 queue的队列使用详解
Jul 19 PHP
Yii框架getter与setter方法功能与用法分析
Oct 22 PHP
PHP网站常见安全漏洞,及相应防范措施总结
Mar 01 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 上传功能实例代码
2010/04/13 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
基于js中document.cookie全面解析
2017/09/14 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
2019/05/14 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
js实现简易计算器功能
2019/10/18 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
Python中itertools模块用法详解
2014/09/25 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
个人对照检查材料
2014/02/12 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL