JS分片上传

最新推荐文章于 2024-04-01 18:02:04 发布
最新推荐文章于 2024-04-01 18:02:04 发布
阅读量2.7k 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han_cui/article/details/79083351
版权
开发中遇到的几个问题：
1：js传送文件的数据，无法传送的问题，最后采用了实例化h5的接口，FormData，利用这个构建form表单，进行表单的传送数据，文件
2：遇到了传的问题中，传了一半不传了，是因为设置了timeout的值有点小
3：在用，file_put_contents ，filesize，这两个函数的时候路径没有写对，导致了判断失误的问题
4：FILE_APPEND表示向同一个文件中追加的意思
5：ajax 中timeout的单位为毫秒

file_put_contents($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'.$arr['fileName'],file_get_contents($files['tmp_name']),FILE_APPEND)

// 计算文件大小 size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size / (1024 * 1024)).toFixed(2) + 'MB' : (file.size / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';


//页面代码
<input type="file" name="slice" id="slice" >
<a href="javascript:void(0);" οnclick="sendForm()">Js File Upload!</a>
<div id="output"><!--  信息存放地  --> </div>

//JS代码
<script type="text/javascript">
    $("#slice").change(function(event) {
        var file = $("#slice")[0].files[0];
        PostFile(file,0);

    });
    //执行分片上传
    function PostFile(file,i){
        var name = file.name,                          //文件名
            size = file.size,                          //总大小shardSize = 2 * 1024 * 1024,
            shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
            shardCount = Math.ceil(size / shardSize);  //总片数
        if(i >= shardCount){
            return;
        }
        //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
        var start = i * shardSize;
        var end = start + shardSize;
        var packet = file.slice(start, end);  //将文件进行切片
        /*  构建form表单进行提交  */
        var form = new FormData();
        form.append("data", packet); //slice方法用于切出文件的一部分
        form.append("lastModified", file.lastModified); //最后的额修改时间
        form.append("name", name);
        form.append("totalsize", size);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        $.ajax({
            url: "__CONTROLLER__/upload",
            type: "POST",
            data: form,
            //timeout:"10000",
            async: true, //异步
            dataType:"json",
            processData: false, //很重要，告诉jquery不要对form进行处理
            contentType: false, //很重要，指定为false才能形成正确的Content-Type
            success: function (msg) {
                console.log(msg);
                /*  表示上一块文件上传成功，继续下一次  */
                if (msg.status == 201) {
                    form = '';
                    i++;
                    PostFile(file, i);
                } else if (msg.status == 502) {
                    form = '';
                    /*  失败后，每2秒继续传一次分片文件  */
                    setInterval(function () { PostFile(file, i) }, 2000);
                } else if (msg.status == 200) {
                    console.log("上传成功");
                } else if (msg.status == 500) {
                    console.log('第'+msg.i+'次，上传文件有误！');
                } else {
                    console.log('未知错误');
                }
            }
        })
    }
</script>

//服务器端代码
if($_POST){
    $files = $_FILES['data'];
    $arr['i'] = $_POST['index'];
    $arr['shardCount'] = $_POST['total'];
    $arr['totalsize'] = $_POST['totalsize'];
    $arr['fileName'] = $_POST['name'];
    if($files['error'] > 0){
        $arr['status'] = 500;
        exit(json_encode($arr));
    }
    if($files['error'] == 0){
        /*  检测第一次上传的时候已经有同文件时，删除原来的文件  */
        if ($arr['i'] == 1 && is_file('/Public/Upload/'. $arr['fileName']) && filesize($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'. $arr['fileName']) == $arr['totalsize']) {
            unlink($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'. $arr['fileName']);
        }
        // 否则继续追加文件数据
        if (!file_put_contents($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'.$arr['fileName'],file_get_contents($files['tmp_name']),FILE_APPEND)) {
            $arr['status'] = 501;
            exit(json_encode($arr));
        }
        // 在上传的最后片段时，检测文件是否完整（大小是否一致）
        if ($arr['i'] == $arr['shardCount']) {
if(filesize($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'. $arr['fileName']) == $arr['totalsize']){
    $arr['status'] = 200;
}else{
    $arr['status'] = 501;
}
exit(json_encode($arr));
        }
        $arr['status'] = 201;
        exit(json_encode($arr));
    }else{
        $arr['status'] = 502;
        exit(json_encode($arr));
    }
}else{
    $this->display();
}



附件1：upload.html,
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS分片上传-极速上传</title>
</head>
<body>
    <input type="file" name="slice" id="slice" >
    <a href="javascript:void(0);" οnclick="sendForm()">Js File Upload!</a>
    <div id="output"><!--  信息存放地  --> </div>
<br/>
</body>
<script src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $("#slice").change(function(event) {
        var file = $("#slice")[0].files[0];
        PostFile(file,0);


    });
    //执行分片上传
    function PostFile(file,i){
        var name = file.name,                           //文件名
            size = file.size,                           //总大小shardSize = 2 * 1024 * 1024,
            shardSize = 2 * 1024 * 1024,                //以2MB为一个分片,每个分片的大小
            shardCount = Math.ceil(size / shardSize);   //总片数
        if(i >= shardCount){
            return;
        }
        //console.log(size,i+1,shardSize);  //文件总大小，第一次，分片大小//
        var start = i * shardSize;
        var end = start + shardSize;
        var packet = file.slice(start, end);  //将文件进行切片
        /*  构建form表单进行提交  */
        var form = new FormData();
        form.append("data", packet); //slice方法用于切出文件的一部分
        form.append("lastModified", file.lastModified); //最后的额修改时间
        form.append("name", name);
        form.append("totalsize", size);
        form.append("total", shardCount); //总片数
        form.append("index", i + 1); //当前是第几片
        $.ajax({
            url: "__CONTROLLER__/upload",
            type: "POST",
            data: form,
            //timeout:"10000",  //超时10秒
            async: true, //异步
            dataType:"json",
            processData: false, //很重要，告诉jquery不要对form进行处理
            contentType: false, //很重要，指定为false才能形成正确的Content-Type
            success: function (msg) {
                console.log(msg);
                /*  表示上一块文件上传成功，继续下一次  */
                if (msg.status == 201) {
                    form = '';
                    i++;
                    PostFile(file, i);
                } else if (msg.status == 502) {
                    form = '';
                    /*  失败后，每2秒继续传一次分片文件  */
                    setInterval(function () { PostFile(file, i) }, 2000);
                } else if (msg.status == 200) {
                    console.log("上传成功");
                } else if (msg.status == 500) {
                    console.log('第'+msg.i+'次，上传文件有误！');
                } else {
                    console.log('未知错误');
                }
            }
        })
    }




</script>
</html>

附件2：SliceUploadController.class.php
<?php
namespace Home\Controller;
use Think\Controller;
class SliceUploadController extends Controller {
    /*
     * JS预览
     * @author 阿旺
     * */
    public function index(){
        $this->display();
    }


    /*
     * 分片上传demo
     * @author 阿旺
     * */
    public function upload(){
        if($_POST){
            $files = $_FILES['data'];
            $arr['i'] = $_POST['index'];
            $arr['shardCount'] = $_POST['total'];
            $arr['totalsize'] = $_POST['totalsize'];
            $arr['fileName'] = $_POST['name'];
            if($files['error'] > 0){
                $arr['status'] = 500;
                exit(json_encode($arr));
            }
            if($files['error'] == 0){
                /*  检测第一次上传的时候已经有同文件时，删除原来的文件  */
                if ($arr['i'] == 1 && is_file('/Public/Upload/'. $arr['fileName']) && filesize($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'. $arr['fileName']) == $arr['totalsize']) {
                    unlink($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'. $arr['fileName']);
                }
                // 否则继续追加文件数据
                if (!file_put_contents($_SERVER['DOCUMENT_ROOT'].'/Crawler/Public/Upload/'.$arr['fileName'],file_get_contents($files['tmp_name']),FILE_APPEND)) {
                    $arr['status'] = 501;
                    exit(json_encode($arr));
                }
                // 在上传的最后片段时，检测文件是否完整（大小是否一致）
                if ($arr['i'] == $arr['shardCount']) {
                    $arr['status'] = 200;
                    exit(json_encode($arr));
                }
                $arr['status'] = 201;
                exit(json_encode($arr));
            }else{
                $arr['status'] = 502;
                exit(json_encode($arr));
            }
        }else{
            //echo "1";die;
            $this->display();
        }


    }


    /*
     * JS断点上传
     * @author 阿旺
     * */
    public function breakpoint($file_path = '') {
        if ($_POST) {
            $speed = 1024;//此参数为下载最大速度
            $pos = strrpos($file_path, "/");
            $file_name = substr($file_path, $pos + 1);
            $file_size = filesize($file_path);
            $ranges = $this->getRange($file_size);
            $fh = fopen($file_path, "rb");
            header('Cache-control: public');
            header('Content-Type: application/octet-stream');
            header('Content-Disposition: attachment; filename=' . $file_name);
            if ($ranges != null) {
                header('HTTP/1.1 206 Partial Content');
                header('Accept-Ranges: bytes');
                header(sprintf('Content-Length: %u', $ranges['end'] - $ranges['start']));
                header(sprintf('Content-Range: bytes %s-%s/%s', $ranges['start'], $ranges['end'], $file_size));
                fseek($fh, sprintf('%u', $ranges['start']));
            } else {
                header("HTTP/1.1 200 OK");
                header(sprintf('Content-Length:%s', $file_size));
            }
            while(!feof($fh)) {
                fread($fh, round($speed*1024, 0));
                ob_flush();
                //sleep(1);
            }
        } else {
            $this->display();
        }
    }


    /**
     * 获取header range信息
     * @param  int   $file_size 文件大小
     * @return Array
     * */
    private function getRange($file_size){
        if(isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])){
            $range = $_SERVER['HTTP_RANGE'];
            $range = preg_replace('/[\s|,].*/', '', $range);
            $range = explode('-', substr($range, 6));
            if(count($range)<2){
                $range[1] = $file_size;
            }
            $range = array_combine(array('start','end'), $range);
            if(empty($range['start'])){
                $range['start'] = 0;
            }
            if(empty($range['end'])){
                $range['end'] = $file_size;
            }
            return $range;
        }
        return null;
    }
}
feitianli37
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
大文件分片上传，大视频等.zip
04-08
视频需要修改html和check.php的文件类型
js实现大文件分片上传的方法
weixin_30394251的博客
06-06 283
借助js的Blob对象FormData对象可以实现大文件分片上传的功能，关于Blob和FormData的具体使用方法可以到如下地址去查看FormData 对象的使用Blob 对象的使用以下是实现代码，本例中后端代码使用php来实现，只是演示基本功能，具体一些文件验证逻辑先忽略。前段代码： <!DOCTYPE html> <html lang="en"> ...
HTML5实现大文件分片上传实例
最新发布
weixin_52041354的博客
04-01 283
用户上传的文件比较大，有20G左右，直接用HTML传的话容易失败，服务器也容易出错，需要分片，分块，分割上传。要求：前端HTML5，VUE2，VUE3，支持大文件分片，分段，分块，分割上传，支持断点续传，支持加密上传，支持批量上传，支持关闭浏览器后重新打开仍然能够继续上传，支持1000个文件批量上传，支持离线进度信息保存功能。接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表。将up6组件复制到项目中。示例中已经包含此目录。
前端实现文件分片上传
long321041080的博客
06-08 2302
扩充知识库，前端实现文件分片上传
java视频文件分片上传
m0_62317155的博客
02-05 2273
java分块上传视频
【JavaScript】文件分片上传
等时钟成长
05-28 2200
大文件分片上传
minio最佳性能分片上传
03-03
1. 基于原来的分片上传做了修改 2. 断点续传 3. 小一点视频的md5的更换
vue大文件上传的demo案例，可与fastdfs、Minio等文件系统实现分片上传
11-28
vue-simple-upload大文件上传的demo案例，可与fastdfs、Minio等文件系统实现分片上传
PHP+Resumable.js分片上传
11-07
PHP+Resumable.js分片上传，不限制上传文件类型
Vue.Js及Java实现文件分片上传代码实例
10-15
主要介绍了Vue.Js及Java实现文件分片上传代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
【微信小程序】大文件上传
weixin_46070649的博客
03-11 763
微信小程序大文件上传
SpringBoot 整合 MinIO 实现视频的分片上传/断点续传（亲测可行）
Java知音
06-19 1546
1、前言之前做了一个慕课网上的仿短视频开发，里面有很多比较粗糙的实现，比如视频上传部分是直接由前端上传云服务，没考虑到客户的网络环境质量等问题，如果一个视频快上传完了，但是网断了没有上传完成需要客户重新上传，这对于用户体验是极差的。那么我们对于视频文件的上传可以采取断点续传，上传过程中，如果出现网络异常或程序崩溃导致文件上传失败时，将从断点记录处继续上传未上传完成的部分，断点续传依赖于MD5和分片...
SpringBoot整合FFmpeg进行视频分片上传（Linux）
weixin_45817985的博客
08-21 2814
SpringBoot整合FFmpeg进行视频分片上传（Linux）
JavaScript 大文件分片上传处理
weixin_45525177的博客
12-09 1105
实现原理，就是在每个文件上传前，就获取到文件MD5取值，在上传文件前调用接口（/index/checkFileMd5，没错也是秒传的检验接口）如果获取的文件状态是未完成，则返回所有的还没上传的分块的编号，然后前端进行条件筛算出哪些没上传的分块，然后进行上传。文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。
前端分片上传
jsPao的博客
12-03 309
前端分片上传是一种将大文件分成若干个小块进行上传的方式，以解决大文件上传时网络不稳定或上传速度慢的问题。
前端大文件分片上传
m0_50007683的博客
10-26 1829
【代码】前端大文件分片上传。
视频上传-分片上传那点事
02-03 1127
我们都知道 分片上传 是为了提升文件保存的速度。那它是如何实现的呢? 这次小编带你一次看个透
js分片上传代码
05-24
以下是一个简单的 JavaScript 分片上传代码示例： ```javascript const CHUNK_SIZE = 1024 * 1024; // 每个分片大小为1MB，可以根据实际情况进行调整 function uploadFile(file) { const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 计算总共需要上传的分片数 let uploadedChunks = 0; // 已上传的分片数 // 生成一个 Promise 对象，用于上传指定的分片 function uploadChunk(chunkIndex) { return new Promise((resolve, reject) => { const startByte = chunkIndex * CHUNK_SIZE; const endByte = Math.min((chunkIndex + 1) * CHUNK_SIZE, file.size); const xhr = new XMLHttpRequest(); xhr.open("PUT", "/upload", true); xhr.setRequestHeader("Content-Type", "application/octet-stream"); xhr.setRequestHeader("X-Chunk-Index", chunkIndex); xhr.setRequestHeader("X-Total-Chunks", totalChunks); xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(file.slice(startByte, endByte)); }); } // 串行上传所有分片 function uploadAllChunks() { if (uploadedChunks >= totalChunks) { // 所有分片上传完成 alert("上传完成！"); return; } uploadChunk(uploadedChunks) .then(() => { uploadedChunks++; uploadAllChunks(); }) .catch(error => { console.error(`上传第 ${uploadedChunks} 个分片时遇到错误：${error}`); }); } uploadAllChunks(); } ``` 在上述代码中，我们定义了 `CHUNK_SIZE` 常量表示每个分片的大小，然后根据文件大小计算出总共需要上传的分片数。`uploadChunk` 函数用于上传指定分片，它返回一个 Promise 对象表示上传结果。`uploadAllChunks` 函数则用于串行上传所有分片，每上传一个分片就调用一次 `uploadChunk` 函数，如果上传成功则继续上传下一个分片，否则记录错误信息并停止上传。最后，我们调用 `uploadAllChunks` 函数开始上传所有分片。 需要注意的是，上述代码中我们使用了 XMLHttpRequest 对象来进行分片上传，因此需要在服务端正确处理上传请求。具体实现方式可以参考使用其他方法上传整个文件的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值