JQuery大文件上传和断点续传

作者：System 时间：2024年08月21日分类：所有,jquery 字数：1592

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

使用jQuery实现大文件上传和断点续传，可以结合jQuery.ajax和后端支持分片上传的服务。以下是一个简单的实现示例：

前端代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大文件上传</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="file" id="fileUpload" />
<script>
$(document).ready(function () {
    $('#fileUpload').change(function () {
        var file = this.files[0];
        var chunkSize = 1024 * 1024; // 每个分片的大小，这里以1MB为例
        var chunkCount = Math.ceil(file.size / chunkSize);
 
        for (var i = 0; i < chunkCount; i++) {
            var chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
            var formData = new FormData();
            formData.append('file', chunk);
            formData.append('filename', file.name);
            formData.append('chunkIndex', i);
            formData.append('chunkCount', chunkCount);
 
            $.ajax({
                url: 'your_upload_server_endpoint', // 上传服务端点
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log('Chunk uploaded successfully');
                },
                error: function (error) {
                    console.error('Error uploading chunk:', error);
                }
            });
        }
    });
});
</script>
</body>
</html>

后端代码需要能够处理分片逻辑，并在所有分片上传完成后合并文件。具体实现依赖于后端语言和框架，如Node.js的Multer、Python的django-storages等。

注意：以上代码仅为示例，实际应用时需要处理错误、进度条更新、取消上传、暂停和继续上传等功能。

JQuery大文件上传和断点续传

评论已关闭

推荐阅读