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 相关文章推荐
JAVA/JSP学习系列之六
Oct 09 PHP
Fatal error: Call to undefined function curl_init()解决方法
Apr 09 PHP
smarty获得当前url的方法分享
Feb 14 PHP
ThinkPHP3.1数据CURD操作快速入门
Jun 19 PHP
php对象在内存中的存在形式分析
Feb 03 PHP
使用 PHPStorm 开发 Laravel
Mar 24 PHP
php版微信公众账号第三方管理工具开发简明教程
Sep 23 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
Nov 14 PHP
PHP实现多图上传和单图上传功能
May 17 PHP
PHP实现的杨辉三角求解算法分析
Mar 11 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
Jun 03 PHP
PHP字符串和十六进制如何实现互相转换
Jul 16 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
node.js require() 源码解读
2015/12/13 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python完全新手教程
2007/02/08 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python实现linux下抓包并存库功能
2018/07/18 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
迎新晚会邀请函
2014/02/01 职场文书
实习生工作证明范本
2014/09/14 职场文书
租车协议书范本2014
2014/11/17 职场文书
拉贝日记观后感
2015/06/05 职场文书
教师岗位说明书
2015/09/30 职场文书
创业计划之特色精品店
2019/08/12 职场文书