jquery文件分段上传文件

Hey小伙伴们，今天要给大家带来一个超级实用的小技巧——如何用jQuery实现文件的分段上传，是不是听起来就觉得很高级呢？别急，跟着我一步步来，保证你也能成为技术小达人！

我们得明白为什么需要分段上传，想象一下，当你要上传一个超大文件，比如高清视频或者大型数据库文件时，如果网络不稳定或者电脑性能不够强大，上传过程可能会非常缓慢，甚至失败，这时候，分段上传就显得尤为重要了，它可以把一个大文件分成多个小块，然后逐一上传，大大提升了上传的稳定性和效率。

如何用jQuery实现这一功能呢？别急，我来慢慢道来。

准备工作

在开始之前，我们需要准备一些东西，确保你的项目中已经引入了jQuery库，这是我们实现功能的基础，如果你还没有，可以通过CDN快速引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

HTML结构

我们需要一个简单的HTML结构来让用户选择文件并触发上传：

<input type="file" id="fileInput">
<button id="uploadButton">上传文件</button>

JavaScript逻辑

我们来编写JavaScript代码，我们需要监听文件选择和上传按钮的事件：

$(document).ready(function() {
    $('#fileInput').change(function() {
        var file = this.files[0];
        if (file) {
            var chunkSize = 1024 * 1024; // 设置每段的大小为1MB
            var chunks = Math.ceil(file.size / chunkSize); // 计算需要多少段
            var currentChunk = 0;
            function uploadNextChunk() {
                if (currentChunk < chunks) {
                    var blob = file.slice(currentChunk * chunkSize, (currentChunk + 1) * chunkSize);
                    var formData = new FormData();
                    formData.append('file', blob);
                    formData.append('chunk', currentChunk);
                    formData.append('chunks', chunks);
                    $.ajax({
                        url: '/upload', // 你的上传接口
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            currentChunk++;
                            uploadNextChunk();
                        },
                        error: function() {
                            console.log('上传失败');
                        }
                    });
                } else {
                    console.log('上传完成');
                }
            }
            uploadNextChunk();
        }
    });
    $('#uploadButton').click(function() {
        $('#fileInput').click(); // 触发文件选择
    });
});