php教程

PHP大文件分片上传并带进度条功能示例

我的站长站 2023-01-02 人阅读

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>

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+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 42 1年前
  • 宝塔面板环境上传大文件失败配置方法

    宝塔面板环境上传100M大小的文件,在上总是报错,但是在本地可以正常上传。上传小一点的文件,就不报错。代码和nginx和php的配置文件都设置了150M,超时时间也设置了,应该没啥问题。但就是报错。百度好久,网上说的答案都试了,没效果。解决方法1、fread()的方法...

    宝塔面板 174 1年前
  • php上传大文件必备配置方法

    项目要求如果你的项目需要用到大文件上传或下载功能,就必须首先修改PHP的配置才行,否则上传或下载操作就会超时,操作失败。操作步骤打开php配置文件php.ini,首先找到; file uploads ;区域,有影响文件上传的以下几个参数:file_uploads = on ;//是否允许...

    php教程 50 1年前
  • 大文件分片上传 / 下载限速解决方案

    分片上传将需要上传的文件按照一定的分割规则,分割成相同大小的数据块;初始化一个分片上传任务,返回本次分片上传唯一标识;按照一定的策略(串行或并行)发送各个分片数据块;发送完成后,服务端根据判断数据上传是否完整,如果完整,则进行数据块合成得到原始文件。...

    php教程 38 1年前
  • HTML5实现大文件分片上传

    上传大文件一直是个比较头疼的问题,一是上传时间长,中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片,一片一片的传到服务端,再...

    js教程 20 1年前
  • php+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 42 1年前
  • PHP大文件分片上传并带进度条功能示例

    html文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="stylesheet" href...

    php教程 45 1年前
  • Ajax实现文件上传进度条功能示例代码

    1. HTML代码<div class="form-group required"> <label class="col-sm-3 control-label">文件名:</label> <div class="col-sm-6"> <input id="fileName" name="fileName" class=&quot...

    js教程 46 1年前
  • 利用flush开发文件下载进度条功能示例

    原理就是分次读写,每次读多少字节,用socket保持与客户端通讯,利用flush()持续更新浏览器UI,返回已下载的数据大小,显示下载速度,以及进度条之类;<html><body><table border="1" width="300"><tr><td width="100">文件大小</td><td width="200"><div...

    php教程 39 1年前
最新更新