大文件分片上传

最新推荐文章于 2024-07-01 10:24:41 发布
最新推荐文章于 2024-07-01 10:24:41 发布
阅读量188 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44974966/article/details/109337553
版权

前端文件

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title></title>
</head>
<body>
<div id="progress">
	<div id="finish_video" class="finish" style="width: 0%;" progress="0"></div>
	<input type="hidden" name="VideoName" id="VideoName">
</div>
<div class="btn-group">
	<input id="video_file" type="file" class="file-input" style="visibility: hidden">
	<span class="btn btn-info btn-upload" style="position: absolute;top: 0;" onclick="  $(this).prev('input').trigger('click'); ">上传</span>
</div>
<p>文件地址：<a id="wenjiandizhi"></a></p>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
	//分片上传
    //上传视频
    var fileNameTime = Date.parse(new Date())/1000;

    var video_file = document.getElementById("video_file");
    var jdt_s = document.getElementById('finish_video');
    var ipt_s = $('#VideoName');
    var video_upload = new Upload(jdt_s,ipt_s);
    video_file.onchange = function(){
        fileNameTime = fileNameTime+1;
        video_upload.addFileAndSend(this);
    };

    function Upload(jdt,ipt){
        const LENGTH = 20 * 1024 * 1024;
        var start = 0;
        var end = start + LENGTH;
        var blob;
        var blob_num = 1;
        var is_stop = 0;
        //对外方法，传入文件对象
        this.addFileAndSend = function(that){
            var file = that.files[0];
            blob = cutFile(file);
            sendFile(blob,file);
            blob_num  += 1;
        };
        //切割文件
        function cutFile(file){
            var file_blob = file.slice(start,end);
            start = end;
            end = start + LENGTH;
            return file_blob;
        }
        //发送文件
        function sendFile(blob,file){
            var xhr = new XMLHttpRequest();
            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',fileNameTime+file.name.substr(file.name.lastIndexOf(".")));

            xhr.open('POST','./demo.php',false);
            xhr.onreadystatechange  = function () {
                var progress;
                var progressObj = jdt;
                if(total_blob_num == 1){
                    progress = '100%';
                }else{
                    progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';
                }
                progressObj.style.width = progress;
                progressObj.innerHTML=progress;
                var t = setTimeout(function(){
                    if(start < file.size && is_stop === 0){
                        blob = cutFile(file);
                        sendFile(blob,file);
                        blob_num  += 1;
                    }else{
                        var responsePath = xhr.responseText;
                        var firstPath = responsePath.indexOf("{");
                        var lastPath = responsePath.indexOf("}");
                        var pathReturn = responsePath.substr(firstPath,lastPath-firstPath+1);
                        var pathReturnObj = eval('(' + pathReturn + ')');
                        ipt.val('/public'+pathReturnObj.file_path);
                        $('#wenjiandizhi').html('http://demo.1234ok.cn/public'+pathReturnObj.file_path);
                        alert('上传成功');
                        xhr = undefined;
                        form_data = undefined;
                    }
                },1000);
            };
            xhr.send(form_data);
        }
    }
</script>
</body>
</html>

后台文件

<?php
function cut_upload()
{

	include('UploadService.php');
    //实例化并获取系统变量传参
    $upload = new UploadService('video',$_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name']);
    //调用方法，返回结果
    $upload->apiReturn();
}
ini_set("max_execution_time", "0");
ini_set('memory_limit','-1');
cut_upload();

上传类

<?php

class UploadService
{
    private $filepath;
    private $tmpPath;  //PHP文件临时目录
    private $blobNum; //第几个文件块
    private $totalBlobNum; //文件块总数
    private $fileName; //文件名
    private $savePath; //保存路径
    private $basePath;

    public function __construct($type, $tmpPath,$blobNum,$totalBlobNum,$fileName){
        $this->tmpPath =  $tmpPath;
        $this->blobNum =  $blobNum;
        $this->totalBlobNum =  $totalBlobNum;
        $this->fileName =  $fileName;
        $this->savePath =  date('Ymd',mb_substr($fileName,0,10));
        $this->DataPath = date('Ymd',time());
        $this->filepath = './public/uploads/'.$type .'/'.$this->DataPath.'/';
        $this->basePath = './public/uploads/'.$type;
    }

    //判断是否是最后一块，如果是则进行文件合成并且删除文件块
    // 也可修改成新的一个新的文件后面持续写入某个文件块内容应该会减少内存的占用
    private function fileMerge(){
        if($this->blobNum == $this->totalBlobNum){
            $blob = '';
            for($i=1; $i<= $this->totalBlobNum; $i++){
                $blob .= file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);
            }
            file_put_contents($this->filepath.'/'. $this->fileName,$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);
    }

    //API返回数据
    public function apiReturn(){
        if(!file_exists($this->basePath)){
            mkdir($this->basePath);
        }
        $this->moveFile();
        $this->fileMerge();
        if($this->blobNum == $this->totalBlobNum){
            if(file_exists($this->filepath.'/'. $this->fileName)){
                $data['code'] = 2;
                $data['msg'] = 'success';
                //$_SERVER['DOCUMENT_URI']=>$_SERVER['REQUEST_URI']
//                $data['file_path'] = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['REQUEST_URI']).str_replace('.','',$this->filepath).'/'. $this->fileName;
                $data['file_path'] = '/uploads/video/'.$this->DataPath.'/'.$this->fileName;
            }
        }else{
            if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){
                $data['code'] = 1;
                $data['msg'] = 'waiting for all';
                $data['file_path'] = '';
            }
        }
        header('Content-type: application/json');
        echo json_encode($data);
    }

    //建立上传文件夹
    private function touchDir(){
        if(!file_exists($this->filepath)){
            mkdir($this->filepath);
        }
    }

}
Follow me ！�
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大文件上传——分片上传
weixin_45678402的博客
02-23 874
大文件分片上传
Unity3D IOS下保存和读取资源（保存到文件夹目录）.docx
06-03
Unity3D IOS下保存和读取资源（保存到文件夹目录），在Unity中IOS下将资源读取和保存，保存可以保存到文件夹目录
“保姆级”大文件上传教程 :切片上传 + 断点续传 + 秒传 + 暂停上传
最新发布
cpc980209的博客
07-01 2615
全网”保姆级“大文件上传超详细教程，有Vue2跟Vue3版本搭配Node，切片上传 + 断点续传 + 秒传 + 暂停上传。学完后直接狂虐甲方！
Unity3D IOS Android支持中文与本地文件的读取写入
苗伟业的专栏
12-03 1005
原创文章如需转载请注明：转载自雨松MOMO程序研究院本文链接地址:Unity3D研究院之IOS Android支持中文与本地文件的读取写入（二十七）          前几天有个朋友问我为什么在IOS平台中可以正常的读写文件可是在Android平台中就无法正常的读写。当时因为在上班所以我没时间来帮他解决，晚上回家后我就拿起安卓手机真机调试很快就定位问题所在，原来是他文件的路径写错了。开发中往
java大文件分片上传示例
09-24
java大文件分片上传示例，java大文件分片上传示例，java大文件分片上传示例，欢迎大家下载！！
springboot大文件分片上传
10-20
在IT行业中，大文件...综上所述，Spring Boot实现大文件分片上传是一个涉及文件处理、并发控制、状态管理等多个技术领域的问题。通过合理的设计和实现，可以构建出高效、可靠的文件上传系统，满足大文件上传的需求。
轻松实现超大文件分片上传.zip
10-20
在IT行业中，大文件分片上传是一项常见的技术需求，尤其在云存储、文件分享和协作平台等场景下。本文将详细解析如何轻松实现超大文件的分片上传，并讨论相关的关键知识点。 首先，理解“分片上传”的概念是至关重要...
java 大文件分片上传
07-08
因此，大文件分片上传成为了解决这些问题的有效策略。本文将详细介绍如何使用Java实现大文件的分片上传。 大文件分片上传的基本思路是将大文件分割成多个小块（通常称为“片”或“块”），然后逐个上传这些小块，...
unity+android：打开安卓文件浏览器，并获取选择文件真实路径-附件资源
03-02
unity+android：打开安卓文件浏览器，并获取选择文件真实路径-附件资源
Unity中Android的文件操作
07-13
原数据存放在StreamingAsset中，首次启动复制到persistentDataPath，以后进行更新和读取都在persistentDataPath中使用File进行文件操作。需要恢复书序的时候从StreamingAsset中获取即可。
Unity下跨windows和ios读写Excel文件
11-14
c#写的读写excel文件，没有引用第三方dll，所以可以在windows和ios下使用
Unity中读取手机数据的路径代码
04-17
Unity中读取手机数据的路径代码，手机端的读写和PC机的不一样，针对Windows
前后端大文件切片上传(详细步骤)
10JQKA的博客
07-24 4853
对于文件通常前端向后端发送post或表单请求,基本是没什么问题的,但是大文件的上传是一个特殊的情况，不管怎样简单的需求，在量级达到一定层次时，都会变得异常复杂; 上传大文件时，以下几个变量会影响我们的用户体验,服务器处理数据的能力,请求超时,网络波动,失败后又需要重新上传等等。 其实分片上传，就是将所要上传的文件，按照一定的大小，将整个文件分隔成多个数据块 (Part) 来进行分片上传，从而减少请求时间，如何有某个分片请求失败，只需要重新发送即可，就不需要重新上传！
untiy初识之 ios读取本地数据文件
只爱艾薇儿
03-07 925
http://blog.csdn.net/yhy2218/article/details/50789711 直接放在Resource文件下的数据是不可读的。用streamingAssets才可以 或者Application.datapath后 在Raw文件夹下读取流资源 https://docs.unity3d.com/ScriptReference/Application-stream...
[Unity][Android][LUA][IOS]读取写入txt文件
BuladeMian的博客，菜得抠脚，菜得真实
11-06 4021
接着上一篇继续 [Unity][LUA][SLUA]选择LUA库导入Unity中 创建 txt 文件，来保存文件内容。读取和写入。 从text文件 中读取内容，并创建 新的 文件test1.txt，替换 test1.txt 的某些内容。 显示结果 test1文件 using System.Collections
大文件 分片上传 js
09-15
大文件分片上传是一种将大文件拆分为多个小文件片段进行上传的方法。这种方法可以提高上传效率，并且在网络不稳定的情况下具有断点续传的功能，可以保证文件上传的可靠性。在Vue.js和Java中，可以通过以下步骤实现大文件分片上传： 1. 在前端使用Vue.js实现文件的分片切割。可以使用File API将大文件切割成多个小文件片段，并通过FormData对象上传到后台。 2. 在后台使用Java编写支持分片上传的接口。可以通过Spring Boot框架来实现接口的编写。接收到前端上传的文件片段后，将其存储在服务器的临时目录中。 3. 在后台实现文件的合并。当所有文件片段都上传完成后，在后台将这些文件片段合并成完整的文件。可以使用Java的IO流操作来实现文件的合并操作。 总结起来，大文件分片上传的实现过程主要包括前端的文件切割和上传，后台的文件接收和合并。通过这种方式，可以实现对大文件的高效上传和断点续传的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值