基于php大文件分片上传至七牛云，支持断点续传，,带进度条

合集 - PHP(90)
1.PHP 二维数组相关函数：二维数组指定key排序，二维数组转一维数组，两个二维数组取差集，对象转数组，判断元素是否在多维数组中2.PHP获取时间戳、获取天周月的起始时间、指定时间所在周、指定时间的各个周等相关函数3.PHP使用ZipArchive批量打包压缩文件并下载
4.基于php大文件分片上传至七牛云，支持断点续传，,带进度条
5.基于php+webuploader的大文件分片上传，支持断点续传，带进度条6.PHP PDF转图片7.PHP 通过两个日期计算年龄8.PHP使用pdfparser实现对PDF转换成本文9.php获取图片的主要颜色值RGB10.PHP实现无限级分类11.ThinkPHP5浏览器关闭，继续执行php脚本12.ThinkPHP5权限管理13.PHP+Redis实现排行榜14.PHP操作Redis常用命令15.Thinkphp5+Redis实现商品秒杀16.ThinkPHP5+Redis实现购物车17.用PHP实现SSO单点登录系统接入功能与分析18.PHP自动加载composer下载的类库19.Windows上composer安装20.ThinkPHP5分布式数据库读写分离21.THINKPHP5截取标题长度并加省略号22.ThinkPHP5+WebSocket+MySQL实现聊天室23.php+websocket 实现聊天室24.thinkphp实现用户注册时邮箱激活25.Thinkphp5+PHPMailer实现发送邮件26.thinkphp+jquery实现两级评论回复效果27.PHP开发API接口签名生成及验证28.php 使用 CURL 获取数据29.PHP正则表达式常用例子30.微信小程序+php 授权登陆，完整代码31.thinkphp5 + barcode 生成条形码32.PHP查询附近的人及其距离的实现方法33.thinkPHP+LayUI 懒加载实现34.php与阿里云短信接口接入35.php日期格式化方法详解36.php 根据URL下载远程图片、压缩包、pdf等文件到本地37.php+js实现极验，拖动滑块验证码验证表单38.php无限分类方法类39.php的多功能文件操作类40.计算地图上两点间的距离PHP类41.php的微信公众平台开发接口类42.身份证验证PHP类43.php使用fullcalendar日历插件44.php通过某个日期段的周几，获取选中周几对应的日期45.thinkphp 使用paginate分页搜索带参数46.php对二维数据排序47.php获取指定月份月初和月末的时间戳48.PHP批量导出数据为excel表格49.php实现同一时间内一个账户只允许在一个终端登陆50.ThinkPHP5+Layui实现图片上传加预览51.php+layui实现图片上传与预览52.PHP实现无限级分类53.PHP获取本周的每一天的时间54.php生成word,并下载55.PHP实现大转盘抽奖算法56.判断当前浏览器是不是微信浏览器57.ThinkPHP5下自己写日志58.Bootstrap+PHP实现多图上传59.ThinkPHP5事务回滚60.php获取本月、上月、上上月、今日、昨日、上周的起始时间61.ThinkPHP5自定义分页样式62.thinkphp5+qrcode生成二维码63.ThinkPHP_5对数据库的CURL操作64.PHP异常处理65.ThinkPHP实现登陆功能66.使用ThinkPHP实现分页功能67.使用ThinkPHP实现生成缩略图及显示68.使用ThinkPHP实现生成/校验验证码功能69.使用ThinkPHP实现附件上传70.ThinkPHP中create()方法自动验证表单信息71.PHP实现文件下载72.PHP实现批量删除（封装）73.php简单实现二级联动74.PHP中文件操作（2）-- 写文件75.PHP中文件操作（1）--打开/读取文件76.PHP中常用的魔术方法77.PHP生成缩略图（3）--封装类78.PHP生成缩略图（2）--等比缩略图79.PHP生成缩略图（1）--简单缩略图80.调用天气预报接口81.使用JSON实现分页82.使用AJAX实现分页83.PHP中NOTICE错误常见解决方法84.PHP解决中文乱码85.PHP中类和对象的相关函数86.PHP 绘制验证码87.PHP文件上传，下载，Sql工具类！88.PHP中Session的使用89.PHP中Cookie的使用---添加/更新/删除/获取Cookie 及 自动填写该用户的用户名和密码和判断是否第一次登陆90.PHP 类文件的自动加载机制 __autoload()
收起

基于php大文件分片上传至七牛云，使用的是七牛云js-sdk V2版本，引入js文件，配置简单，可以暂停，暂停后支持断点续传（刷新、关闭页面、重新上传、网络中断等情况），可以配置分片大小和分片数量，官方文档https://developer.qiniu.com/kodo/6889/javascript-sdk-historical-document-2-x。token需要从后端获取。如果不使用七牛云可参看基于php+webuploader的大文件分片上传，带进度条

前端<!DOCTYPE html>

复制代码
<html>
<head>
   <meta charset="UTF-8">
   <title>分片上传七牛云</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">

        <br/>
        <!-- 选择文件按钮 -->
        <input id="input-file" class="upload" type="file" value="" onchange="upFile(this)">
         <br/><br/>

        <!-- 进度条 -->
         <div id="totalBar" style="float:left;width:20%;height:20px;border:1px solid;border-radius:3px">
            <div id="totalBarColor" style="width:0%;border:0;background:#00b7ee; color: #FFF;height:20px;"></div>
            <span class="speed"></span>
         </div>
 
         <br/>
         <BR/>
         文件名：<input type="text" name="key">
         <br/>
         <BR/>
      <input type="button" value="上传" onclick="upload()"/>
      <input type="button" value="暂停" onclick="filepause()"/>
    </form>
    <!-- 引入js -->
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
 
    <script>
        var subObject;
       var file;
       //定义上传配置  大于 4M 时可分块上传，小于 4M 时直传
       var config = {
            useCdnDomain: true,     //是否使用 cdn 加速域名
            region: qiniu.region.z1,    //上传域名区域 华东空间z0,华南z2，华北z1
            retryCount: 6,      //上传自动重试次数  默认3次
        };

       //定义putExtra上传限制
       var putExtra = {
            fname: "",  //文件原始文件名
            params: { 'x:flag': 'qiniu'},    //自定义变量
            // mimeType: ["mp4"]     //指定所传的文件类型
        };

        var compareChunks = [];
        var observable;
        var subscription;

        function upFile(node) {
            var fileURL = "";
            try{
                file = null;
                if(node.files && node.files[0] ){
                    file = node.files[0];
                }else if(node.files && node.files.item(0)) {
                    file = node.files.item(0);
                }
            }catch(e){

            }
            creatFile(fileURL,file.name);
            return fileURL;
        }

        // 文件名
        function creatFile(fileURL,fileName){
            $("input[name=key]").val(fileName);
            $("#totalBarColor").css("width","0%");
        }

        // 上传操作
      function upload() {
            // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
            subObject = {
                  next: next,
                  error: error,
                  complete: complete
            };
            token = "**************";　　//需要从后端获取
　　　　　　　　//因为文件上传七牛云后文件名相同的会覆盖原，所以给文件重新命名防止覆盖原文件  file.name 是原文件名
　　　　　　　var filename = new Date()+'_'+file.name
            //上传
            observable = qiniu.upload(file, filename, token, putExtra, config);
            // 调用sdk上传接口获得相应的observable，控制上传和暂停
            subscription = observable.subscribe(subObject);
        }

        // 暂停操作
        function filepause(){
           subscription.unsubscribe();
        }

        //分片上传返回response，标记上传进度  
        var next = function(response) {
           var chunks = response.chunks||[];
           var total = response.total;
           $(".speed").text("进度：" + Math.floor(total.percent) + "% ");  //进度向下取整
           $("#totalBarColor").css("width", total.percent + "%");
           compareChunks = chunks;
         };
        // 错误信息
         var error = function(err) {
               alert(err.message);
         };
         // 上传完成
         var complete = function(res) {
            // 返回文件信息
             console.log(res);
             console.log(res.key);

         };
    </script>
</body>
 
</html>
复制代码

后端：获取token

复制代码


use Qiniu\Auth as Auth;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;


function getToken()
{
  vendor('qiniu.autoload');
  $accessKey = '***';
  $secretKey = '***';
  $bucket = '***';

  $expires = 7200;

  // 构建鉴权对象
  $auth = new Auth($accessKey, $secretKey);

  $token = $auth->uploadToken($bucket,null,$expires, null, true);
  return $token;
}


复制代码


 







		

		
posted @ 
 
下页、再停留 
阅读(356) 
评论(0) 
编辑 
收藏 
举报


	

	
	








    
    

    
    



    

        
    

        

            
                
                
            
        

    



    相关博文：

    

            

                · 
                基于php+webuploader的大文件分片上传，支持断点续传，带进度条
            

            

                · 
                【NKeditor】富文本编辑器上传图片
            

            

                · 
                大文件分片上传，断点续传整理
            

            

                · 
                vue实现大文件分片上传与断点续传到七牛云
            

            

                · 
                基于php+webuploader的大文件分片上传，支持断点续传，带进度条
            

    





    

    阅读排行：
    

 ·          TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
        

 ·          Manus的开源复刻OpenManus初探
        

 ·          写一个简单的SQL生成工具
        

 ·          AI 智能体引爆开源社区「GitHub 热点速览」
        

 ·          C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
        



    

    







	

	


	
	

	

	

	





    

    
    








  

  
点击右上角即可分享

  微信分享提示