1. Python技术站首页
  2. jquery

jQuery webuploader分片上传大文件

• jquery

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

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

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

二、具体的实现步骤

  1. 引入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>
  1. 创建上传容器和实例化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>
  1. 监听文件添加事件，并进行分片上传：
// 文件添加事件
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;
    });
});
  1. 实现断点续传功能：
// 记录已上传文件块信息
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. 注意事项：

  2. 分片大小要根据实际情况来设置，不能设置太小或太大。

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

三、示例说明

  1. 示例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();
});
  1. 示例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技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • AngularJS报错$apply already in progress的解决方法分析

    当我们在使用AngularJS开发时，经常会遇到“$apply already in progress”这个错误提示，这是一个常见的AngularJS报错，并且很容易出现在异步操作和定时器中，即使我们使用了$timeout和$interval这样的AngularJS封装过的定时器也无法避免这个问题。那么这个错误提示到底是什么意思呢？它是怎么出现的？该怎么解决…

    jquery 2023年5月27日
    00

  • jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)

    首先让我们来讲解一下“jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)”这个主题。 一、什么是弹出层效果？ 弹出层效果是一种常见的UI交互效果，它主要指的是通过点击按钮或链接时，页面上会弹出一个浮层来显示相关的内容或者操作。弹出层通常会覆盖在页面的顶部，并且突出显示。 二、实现弹出层效果的技术介绍 在实现弹出层效果的过程中，通常会使用到…

    jquery 2023年5月28日
    00

  • jquery的 filter()方法使用教程

    JQuery的filter()方法使用教程 定义 JQuery中的filter()方法是用于过滤元素集合的方法。它能够按照某些条件过滤集合中的元素，并返回一个新的元素集合。filter()方法可以接受一个函数作为参数，这个函数能够对集合中的每一个元素进行判断，符合条件的元素将会被加入到新的集合中。 语法 $(selector).filter(filterFu…

    jquery 2023年5月27日
    00

  • jQuery Validate插件实现表单强大的验证功能

    下面是详细讲解“jQuery Validate插件实现表单强大的验证功能”的完整攻略。 什么是jQuery Validate插件？ jQuery Validate是一款用于jQuery的表单验证插件，可以使表单验证变得更加简单和高效。通过使用jQuery Validate，您可以轻松地验证表单内容，包括必填字段、电子邮件格式、数字等。此外，它还支持定制化错误…

    jquery 2023年5月28日
    00

  • jQuery插件实现文件上传功能（支持拖拽）

    下面我将为你详细介绍如何使用jQuery插件实现文件上传功能（支持拖拽），同时给出两个示例说明。 概述： jQuery插件实现文件上传功能（支持拖拽）需要用到如下技术： HTML5 FileReader API HTML5 Drag And Drop API jQuery 过程： 创建HTML页面结构。在页面上创建一个div元素，用于显示待上传的文件，还需创…

    jquery 2023年5月27日
    00

  • jQWidgets jqxTreeGrid rowExpand事件

    以下是关于 jQWidgets jqxTreeGrid 组件中 rowExpand 事件的详细攻略。 jQWidgets jqxTreeGrid rowExpand 事件 jQWidgets jqxTreeGrid 组件的 rowExpand 事件在用户展开 TreeGrid 控件的行时触发。通过设置 rowExpand 事件处理程序，可以在展开行时执行自定…

    jquery 2023年5月12日
    00

  • 如何使用Magnific Popup jQuery插件

    确切地说，Magnific Popup是一款快速、可定制、可响应的轻量级jQuery插件，用于显示大图、响应式图库、Ajax / iframe描述和多媒体。该插件支持各种网站类型的自定义。在下面，我将为你提供关于如何使用Magnific Popup插件的完整攻略。 步骤1：下载Magnific Popup插件 首先，你需要下载Magnific Popup插件…

    jquery 2023年5月12日
    00

  • jQWidgets jqxComboBox getCheckedItems()方法

    以下是关于“jQWidgets jqxComboBox getCheckedItems()方法”的完整攻略，包含两个示例说明： 简介 jqxComboBox 控件的 getCheckedItems() 方法用于获取下拉列表中被选中的选项。 完整攻略 以下是 jqxComboBox 控件 getCheckedItems() 方法的整攻略： 定义 getChec…

    jquery 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部