jQuery webuploader分片上传大文件

下面是关于“jQuery webuploader分片上传大文件”的完整攻略：

一、什么是jQuery webuploader分片上传大文件？

大文件上传在互联网应用中是经常遇到的需求之一。但是一般情况下，上传大文件往往需要很长的时间，并且容易造成上传失败的情况。而jQuery webuploader分片上传大文件就是一种解决方案，它能够将大文件切分成多个小片，逐个上传并在服务器端进行合并，从而实现大文件的快速、稳定上传。

二、具体的实现步骤

引入jQuery和webuploader插件：

<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- 引入webuploader插件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/webuploader/0.1.5/webuploader.css">
<script src="https://cdn.bootcss.com/webuploader/0.1.5/webuploader.min.js"></script>

创建上传容器和实例化webuploader对象：

<!-- 文件上传容器 -->
<div id="uploader">
    <div class="queueList">
        <div id="dndArea" class="placeholder">
            <div id="filePicker"></div>
            <p>或将文件拖到这里</p>
        </div>
    </div>
    <div class="statusBar" style="display:none;">
        <div class="progress">
            <span class="text">0%</span>
            <span class="percentage"></span>
        </div>
        <div class="info"></div>
        <div class="btns">
            <div id="filePicker2"></div>
            <div class="uploadBtn">开始上传</div>
        </div>
    </div>
</div>

<script>
// 实例化webuploader对象
var uploader = WebUploader.create({
    // 文件接收服务端。
    server: 'your_upload_url',
    // 是否分片上传，默认为true
    chunked: true,
    // 分片大小，如果不设置则默认为5M
    chunkSize: 5 * 1024 * 1024,
    // 最大同时上传的文件数，默认值：3。
    threads: 3,
    // 上传成功后的处理函数
    uploadSuccess: function(file, response) {
        console.log(response);
    }
});
</script>

监听文件添加事件，并进行分片上传：

// 文件添加事件
uploader.on('fileQueued', function(file) {
    // 当前文件总大小
    var totalSize = file.size,
        // 当前文件已上传的大小
        uploadedSize = 0;

    // 上传进度
    uploader.on('uploadProgress', function(file, percentage) {
        console.log('已上传：' + (totalSize * percentage) + '/' + totalSize);
    });

    // 分片上传
    uploader.on("uploadBeforeSend", function(block, data, headers) {
        console.log("上传的分片：" + block.chunk);
        data.chunkSize = block.end - block.start + 1;
        data.chunkIndex = block.chunk;
        data.chunkCount = block.chunks;
    });
});

实现断点续传功能：

// 记录已上传文件块信息
var uploadedBlocks = [];

// 恢复断点信息，如果服务器端支持断点续传的话
uploader.on("uploadStart", function(file) {
    $.get("your_resume_url", {
        filename: file.name
    }, function(resp) {
        uploadedBlocks = resp.uploadedBlocks || [];
        uploader.options.formData.resumeBlocks = JSON.stringify(uploadedBlocks);
        uploader.options.formData.filename = file.name;
        uploader.options.formData.filesize = file.size;
        uploader.options.formData.filetype = file.type;
        uploader.options.chunkRetry = 5;
        uploader.options.retryInterval = 10000;
    }, "json");
});

// 上传成功后记录已上传文件块信息，以便下次恢复
uploader.on("uploadSuccess", function(file, response) {
    if (response.code === 0) {
        var chunkIndex = response.chunkIndex;
        uploadedBlocks.push(chunkIndex);
    }
});

// 断点续传需特殊处理服务器返回的错误信息
uploader.on("uploadError", function(file, reason) {
    if (reason === "http") {
        var chunkSize = uploader.options.chunkSize;
        var block = Math.floor(this.getFile(file.id).size / chunkSize);
        var retry = uploadedBlocks.indexOf(block);
        if (retry < 0) {
            uploadedBlocks.push(block);
            this.retry();
        } else {
            uploadedBlocks.splice(retry, 1);
            alert("续传失败，请重新选择文件上传！");
        }
    } else {
        alert("上传出错:" + reason);
    }
});

注意事项：
分片大小要根据实际情况来设置，不能设置太小或太大。
要注意服务器端的代码是否支持断点续传，否则资源可能被覆盖。可以在上传时携带文件名、文件大小、文件类型等信息判断资源是否已经存在，避免覆盖文件。
文件上传过程中需做详细记录，如分片情况、已上传文件块信息等，以方便恢复和续传。
对于上传失败的文件块，需要重新上传，直到上传成功。

三、示例说明

示例1：基本分片上传

下面是一个基本的分片上传示例，实现了文件上传的基本功能。

// 实例化webuploader对象
var uploader = WebUploader.create({
    // 文件接收服务端。
    server: 'your_upload_url',
    // 是否分片上传，默认为true
    chunked: true
});

// 文件添加事件
uploader.on('fileQueued', function(file) {
    console.log('文件已添加：' + file.name);
});

// 开始上传
$('.uploadBtn').on('click', function() {
    uploader.upload();
});

示例2：断点续传的分片上传

下面是一个采用断点续传方式的分片上传示例，实现了上传进度条和断点续传功能，并对上传失败的文件块进行重试。

// 实例化webuploader对象
var uploader = WebUploader.create({
    // 文件接收服务端。
    server: 'your_upload_url',
    // 是否分片上传，默认为true
    chunked: true,
    // 分片大小，默认大小为5M
    chunkSize: 5 * 1024 * 1024,
    // 最大同时上传的文件数，默认值：3。
    threads: 3,
    // 上传成功后的处理函数
    uploadSuccess: function(file, response) {
        console.log(response);
    }
});

// 文件添加事件
uploader.on('fileQueued', function(file) {
    console.log('文件已添加：' + file.name);

    // 当前文件总大小
    var totalSize = file.size,
        // 当前文件已上传的大小
        uploadedSize = 0;

    // 上传进度
    uploader.on('uploadProgress', function(file, percentage) {
        console.log('已上传：' + (totalSize * percentage) + '/' + totalSize);
    });

    // 分片上传
    uploader.on("uploadBeforeSend", function(block, data, headers) {
        console.log("上传的分片：" + block.chunk);
        data.chunkSize = block.end - block.start + 1;
        data.chunkIndex = block.chunk;
        data.chunkCount = block.chunks;

        // 记录已上传文件块信息
        var uploadedBlocks = [];

        // 恢复断点信息，如果服务器端支持断点续传的话
        $.get("your_resume_url", {
            filename: file.name
        }, function(resp) {
            uploadedBlocks = resp.uploadedBlocks || [];
            uploader.options.formData.resumeBlocks = JSON.stringify(uploadedBlocks);
            uploader.options.formData.filename = file.name;
            uploader.options.formData.filesize = file.size;
            uploader.options.formData.filetype = file.type;
            uploader.options.chunkRetry = 5;
            uploader.options.retryInterval = 10000;
        }, "json");

        // 上传成功后记录已上传文件块信息，以便下次恢复
        uploader.on("uploadSuccess", function(file, response) {
            if (response.code === 0) {
                var chunkIndex = response.chunkIndex;
                uploadedBlocks.push(chunkIndex);
            }
        });

        // 断点续传需特殊处理服务器返回的错误信息
        uploader.on("uploadError", function(file, reason) {
            if (reason === "http") {
                var chunkSize = uploader.options.chunkSize;
                var block = Math.floor(this.getFile(file.id).size / chunkSize);
                var retry = uploadedBlocks.indexOf(block);
                if (retry < 0) {
                    uploadedBlocks.push(block);
                    this.retry();
                } else {
                    uploadedBlocks.splice(retry, 1);
                    alert("续传失败，请重新选择文件上传！");
                }
            } else {
                alert("上传出错:" + reason);
            }
        });
    });
});

// 开始上传
$('.uploadBtn').on('click', function() {
    uploader.upload();
});

以上就是关于“jQuery webuploader分片上传大文件”的完整攻略，包括了实现步骤和示例说明，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery webuploader分片上传大文件 - Python技术站

jQuery webuploader分片上传大文件

一、什么是jQuery webuploader分片上传大文件？

二、具体的实现步骤

三、示例说明

相关文章