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中操作Excel实例代码
Apr 29 PHP
php 变量未定义等错误的解决方法
Jan 12 PHP
PHP删除数组中的特定元素的代码
Jun 28 PHP
php排序算法(冒泡排序,快速排序)
Oct 09 PHP
探讨:如何通过stats命令分析Memcached的内部状态
Jun 14 PHP
PHP迭代器的内部执行过程详解
Nov 12 PHP
PHP创建word文档的方法(平台无关)
Mar 29 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
Oct 29 PHP
php连接微软MSSQL(sql server)完全攻略
Nov 27 PHP
基于Laravel实现的用户动态模块开发
Sep 21 PHP
PHP实现SMTP邮件的发送实例
Sep 27 PHP
用PHP的反射实现委托模式的讲解
Mar 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 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Vue之Watcher源码解析(2)
2017/07/19 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
python实现多线程网页下载器
2018/04/15 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
python与js主要区别点总结
2020/09/13 Python
django使用多个数据库的方法实例
2021/03/04 Python
加拿大探亲邀请信
2014/01/28 职场文书
高中体育教学反思
2014/01/29 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
部门年终奖分配方案
2014/05/07 职场文书
义和团口号
2014/06/17 职场文书
英语系毕业生求职信
2014/07/13 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
高三化学教学反思
2016/02/22 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技