广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >PHP+JS实现文件分块上传的示例代码
  • 539
分享到

PHP+JS实现文件分块上传的示例代码

PHPJS文件分块上传PHP文件分块上传PHP文件上传 2022-11-13 19:11:15 539人浏览 安东尼
摘要

目录一、分块上传流程二、实现代码htmljsPHP我们在上传大文件时,可能会由于服务器的原因导致文件上传失败,文件过大时由于服务器的配置或响应事件过长导致上传文件失败,这时候我们可以

我们在上传大文件时,可能会由于服务器的原因导致文件上传失败,文件过大时由于服务器的配置或响应事件过长导致上传文件失败,这时候我们可以将一个大的文件分为若干块,然后分批次上传到服务端,当所有文件块上传完成后再由服务器将各个文件块整合成我们上传的文件

一、分块上传流程

1:由前端js将上传的文件信息进行切割成若干块,然后循环将若干块的文件块上传到服务端

2:服务端接收到文件块信息后保存起来,当所有文件块上传完毕后,将所有上传的文件块整合成文件并保存起来

二、实现代码

HTML

<input type="file" id="file">
<input type="button" id="upload" value="上传">
<input type="button" id="stop" value="停止">
<input type="button" id="restart" value="继续上传">
上传进度:<span id="progress"></span>

JS

//获取节点
var fileFORM = document.getElementById("file");
var uploadBtn = document.getElementById('upload');
var stopBtn = document.getElementById('stop');
var restartBtn = document.getElementById('restart');
//定义常量
const LENGTH = 100 * 1024;//每个上传的文件块大小(100KB)
var start = 0;
var end = LENGTH + start;
var blob;
var is_stop = 0;
var blob_num = 1;
var file = null;
var upload_instance = new Upload();
//上传事件
uploadBtn.onclick = function () {
   upload_instance.addFileAndSend(fileForm);
   return false;
}
stopBtn.onclick = function () {
   upload_instance.stop();
   return false;
}
restartBtn.onclick = function () {
   upload_instance.start();
   return false;
}
function Upload() {
    //判断浏览器类型
    if (window.XMLHttpRequest){
        //IE7+, Firefox, Chrome, Opera, Safari
        var xhr=new XMLHttpRequest();
    }else{
        //IE6, IE5
        var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
   //上传文件
   this.addFileAndSend = function (that) {
       file = that.files[0];
       blob = cutFile(file);
       //上传
       uploadFile(blob, file);
       blob_num += 1;
   }
   //停止文件上传
   this.stop = function () {
       xhr.abort();
       is_stop = 1;
   }
   this.start = function () {
       uploadFile(blob, file);
       is_stop = 0;
   }
   //切割文件
   function cutFile(file) {
       var file_blob = file.slice(start, end);
       start = end;
       end = start + LENGTH;
       return file_blob;
   };
    //上传文件
    function uploadFile(blob, file) {
        var form_data = new FormData();
        var total_blob_num = Math.ceil(file.size / LENGTH);
        //上传文件信息
        form_data.append('file', blob);
        //上传的第几个文件块
        form_data.append('blob_num', blob_num);
        //总文件块数
        form_data.append('total_blob_num', total_blob_num);
        //文件名称
        form_data.append('file_name', file.name);
        
        
        //上传
        xhr.open('POST', './test.php', false);
        xhr.onreadystatechange = function () {
            //获取上传进度
            if (total_blob_num == 1) {
                progressText = '100%';
            } else {
                progressText = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + '%';
            }
            var progress = document.getElementById('progress');
            progress.innerHTML = progressText;
            
            //循环执行上传,直到所有文件块上传完成
            var t = setTimeout(function () {
                if (start < file.size && is_stop == 0) {
                    blob = cutFile(file);
                    uploadFile(blob, file);
                    blob_num += 1;
                } else {
                    //所有文件块上传完成
                }
            }, 1000);
        }
        xhr.send(form_data);
        //每次文件块上传后,清空上传信息
        form_data = "";
    }
}

PHP

上传类

class Upload
{
    
    private $filepath = './upload'; //上传目录
    
    private $tmpPath;
    
    private $blobNum;
    
    private $totalBlobNum;
    
    private $fileName;
    public function __construct($tmpPath, $blobNum,$totalBlobNum,$fileName, $filepath = ''){
        if (!empty($filepath)) {
            $this->filepath = $filepath;
        }
        $this->tmpPath = $tmpPath;
        $this->blobNum = $blobNum;
        $this->totalBlobNum = $totalBlobNum;
        $this->fileName = $fileName;
        //保存文件块
        $this->moveFile();
        //保存文件
        $this->fileMerge();
    }
    private function fileMerge(){
        //当文件块都上传后将文件块整合成文件
        if($this->blobNum == $this->totalBlobNum){
            for($i=1; $i<= $this->totalBlobNum; $i++){
                $blob = '';
                $blob = file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);
                file_put_contents($this->filepath.'/'. $this->fileName, $blob, FILE_APPEND );
                unset($blob);
            }
            //删除文件块
            $this->deleteFileBlob();
        }
    }
    //删除文件块
    private function deleteFileBlob(){
        for($i=1; $i<= $this->totalBlobNum; $i++){
            @unlink($this->filepath.'/'. $this->fileName.'__'.$i);
        }
    }
    private function moveFile(){
        $this->touchDir();
        $filename = $this->filepath.'/'. $this->fileName.'__'.$this->blobNum;
        //保存文件块
         move_uploaded_file($this->tmpPath,$filename);
    }
    //上传返回
    public function uploadReturn(){
        if($this->blobNum == $this->totalBlobNum){
            if(file_exists($this->filepath.'/'. $this->fileName)){
                return [
                    'code' => 2,
                    'message' => 'success',
                    'file_path' => 'http://'.$_SERVER['HTTP_HOST'].str_replace('.','',$this->filepath).'/'. $this->fileName,
                    'local_path' => str_replace('.','',$this->filepath).'/'. $this->fileName
                ];
            }
        }
        return [
            'code' => 1,
            'message' => 'waiting',
        ];
    }
    
    private function touchDir(){
        if(!file_exists($this->filepath)){
            return mkdir($this->filepath);
        }
    }
}

调用上传类

$tmpName = $_FILES['file']['tmp_name'];
$blobNum = $_POST['blob_num'];
$totalBlobNum = $_POST['total_blob_num'];
$fileName = $_POST['file_name'];
$upload = new Upload($tmpName, $blobNum, $totalBlobNum, $fileName);
$data = $upload->uploadReturn();
header('Content-type: application/JSON');
return json_encode($data);

根据如上步骤就可以实现将文件分成若干块进行上传功能

到此这篇关于PHP+JS实现文件分块上传的示例代码的文章就介绍到这了,更多相关PHP JS文件分块上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: PHP+JS实现文件分块上传的示例代码

本文链接: https://www.lsjlt.com/news/170756.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • PHP+JS实现文件分块上传的示例代码
    目录一、分块上传流程二、实现代码HTMLJSPHP我们在上传大文件时,可能会由于服务器的原因导致文件上传失败,文件过大时由于服务器的配置或响应事件过长导致上传文件失败,这时候我们可以...
    99+
    2022-11-13
    PHP JS文件分块上传 PHP 文件分块上传 PHP 文件上传
  • Nodejs实现文件上传的示例代码
    笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存...
    99+
    2022-06-04
    示例 文件上传 代码
  • PHP实现文件上传和下载的示例代码
    目录1.效果图2.首先是封装好的图片类(缩放及生成水印)1.GDBasic.php2.Image.php3.ajax类封装文件1.index.php2.图片相关功能处理3.封装好的文...
    99+
    2022-11-13
  • SpringBoot文件分片上传的示例代码
    目录背景文件MD5计算文件分片切割文件分片接收检查分片保存分片合并分片云文件分片上传阿里云OSS华为云OBSMinio背景 最近好几个项目在运行过程中客户都提出文件上传大小的限制能否...
    99+
    2022-11-12
  • Java实现文件分片上传接口的示例代码
    目录java后端分片上传接口前端分片java后端分片上传接口 文件上传工具--FileUtil package com.youmejava.chun.util; import l...
    99+
    2022-11-13
  • GO语言实现文件上传的示例代码
    目录前言文件上传表单操作服务端操作流程实现小结前言 最近在写一个文件上传的功能,现在来进行整理总结一下go语言如何上传文件的,本文主要分享一下golang实现文件上传的流程和具体代码...
    99+
    2022-11-11
  • SpringCloudFeign实现文件上传下载的示例代码
    目录独立使用Feign上传文件下载文件使用Spring Cloud Feign上传文件下载文件总结 Feign框架对于文件上传消息体格式并没有做原生支持,需要集成模块fei...
    99+
    2022-11-13
  • Vue+NodeJS实现大文件上传的示例代码
    目录整体思路项目演示前端界面文件切片hash计算查询切片状态切片上传(断点续传)文件总体上传进度合并文件优化请求并发数控制hash值计算优化常见的文件上传方式可能就是new一个For...
    99+
    2022-11-13
  • JavaSpringBoot实现文件上传功能的示例代码
    测试代码 pom.xml: <xml version="1.0" encoding="UTF-8"> <project xmlns="http://maven.ap...
    99+
    2022-11-13
  • Go Gin实现文件上传下载的示例代码
    Go Gin 实现文件的上传下载流读取 文件上传 router router.POST("/resources/common/upload", service.Uploa...
    99+
    2022-06-07
    gin GO 示例 文件上传
  • js自己实现一个大文件切片上传+断点续传的示例代码
    目录首先我们来分析一下需求一、 格式校验二、 文件切片三、 断点续传 + 秒传 + 上传进度PM:喂,那个切图仔,我这里有个100G的视频要上传,你帮我做一个上传后台,下班前给我哦,...
    99+
    2022-11-13
  • Vue实现文件切片上传功能的示例代码
    目录流程简说获取文件的 MD5 唯一标识码文件切片获取文件名 name分片文件大小 chunkSize文件切片 chunkList 列表切片总数 chunks切片大小 size合并在...
    99+
    2022-11-13
    Vue文件切片上传 Vue文件切片
  • PHP中文件上传的示例分析
    小编给大家分享一下PHP中文件上传的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php有什么特点1、执行速度快。2、具有很好的开放性和可扩展性。3、PH...
    99+
    2023-06-14
  • VUE+element-ui文件上传的示例代码
    目录图片上传(ImageCropper)文件上传(el-upload)注意图片上传(ImageCropper) 此前端代码自己封装了文件上传,只需要配置后端接口需求URL以及对应的图...
    99+
    2022-11-13
  • JS实现可恢复的文件上传示例详解
    目录正文不太实用的进度事件算法server.jsuploader.jsindex.html正文 使用 fetch 方法来上传文件相当容易。 连接断开后如何恢复上...
    99+
    2022-12-29
    JS恢复文件上传 JS文件恢复
  • HTML5实现上传文件显示进度的代码分享
    这篇文章主要介绍“HTML5实现上传文件显示进度的代码分享”,在日常操作中,相信很多人在HTML5实现上传文件显示进度的代码分享问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2022-10-19
  • SpringBoot实现文件上传与下载功能的示例代码
    目录Spring Boot文件上传与下载举例说明1.引入Apache Commons FileUpload组件依赖2.设置上传文件大小限制3.创建选择文件视图页面4.创建控制器5.创...
    99+
    2022-11-13
  • springboot实现分段上传功能的示例代码
    目录文件上传下载导入依赖前端配置前端上传数据断点续传[增量上传]分片下载分片下载分片下载合并文件上传下载 断点续传,增量上传等 导入依赖 <!--jdk提供的关于文件上传--&...
    99+
    2022-11-13
  • Node.js实现文件上传的示例
    文件上传指的是将用户本地的文件上传到服务器中。 上传文件需要处理两个位置: 客户端 客户端如何上传文件? 上传文件的表单项需要指定为input,type是file 要上传文件必须将表单enc...
    99+
    2022-06-04
    示例 文件上传 Node
  • php中文件上传至OSS的示例分析
    小编给大家分享一下php中文件上传至OSS的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!删除的时候记住不要带域名,也不要带'/'这个路径...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作