星尘库-sqlite数据库

sqlite数据库

select ResName from ResTools 把所有行以逗号分隔合成一句话

SELECT group_concat(ResName, ', ') AS ConcatenatedResult FROM ResTools;

分片传输后记

var files = e.target.files; var progressBars = []; // 保存所有进度条元素
for (var i = 0; i < files.length; i++) { //formData.append("files", files[i]); var file = files[i]; var fileStart = 0; //var end = Math.min(chunkSize, file.size); let size = file.size;//文件大小 let maxZrea = 8; // // 分片大小设置为8MB let bufferSize = maxZrea * (1024 * 1024); let fileEnd = bufferSize; let arrFile = []; while (fileStart < size) { var fileInfo = { File: file.slice(fileStart, fileEnd), Start: fileStart, End: fileEnd } arrFile.push(fileInfo); fileStart = fileEnd; fileEnd = fileStart + bufferSize; } let count = arrFile.length; // 获取文件名 var fileNameText = $('

').html(file.name); for (var j = 0; j < count; j++) { let filename = file.name; var formData = new FormData(); // 将歌单参数添加到 FormData 对象中 formData.append('playlist', selectedPlaylist); formData.append("file", arrFile[j].File); //将file属性添加到formData里 formData.append('Name', filename); formData.append('Number', j); formData.append('BufferSize', bufferSize); formData.append('Count', count); formData.append('Size', size); formData.append('Start', arrFile[j].Start); formData.append('End', arrFile[j].End);
// 使用 jQuery 的 AJAX 方法发送 POST 请求\ $.ajax({ url: "/Home/RuleUploadFile", type: "POST", data: formData, processData: false, // 不处理数据 contentType: false, // 不设置内容类型 xhr: function () { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener('progress', function (e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; // 更新相应的进度条元素 progressBars.forEach(function (progressBar) { progressBar.html(percentComplete.toFixed(2) + '%'); progressBar.css('width', percentComplete + '%'); }); } }, false);

             return xhr;
         },
         success: function (response) {
             console.log("文件上传成功"); 
         },
         error: function (xhr, status, error) {
             console.error("文件上传失败:", error);
         }
     }); 
 }  
 var progressBar = $('<div>').html('0%').addClass('progress-bar'); // 创建新的进度条元素; // 创建新的进度条元素
 progressBars.push(progressBar); // 将新元素添加到数组中
 $('#progressContainer').append(fileNameText, progressBar); // 将新元素添加到页面中 因为使用了分片传输导致进度条,出现一个文件两个进度条不匹配的情况,怎么修改上面的代码

根据你提供的代码，出现一个文件对应两个进度条不匹配的情况是因为在循环中为每个文件块分别创建了进度条，而不是为整个文件创建一个进度条。为了解决这个问题，你可以考虑修改代码，将进度条的更新放到外层循环中，以确保一个文件只对应一个进度条。

这里是修改后的代码示例：

var files = e.target.files; 
var progressBars = []; // 保存所有进度条元素  
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var fileStart = 0;
    let size = file.size; // 文件大小
    let bufferSize = 8 * (1024 * 1024); // 分片大小设置为8MB
    let fileEnd = bufferSize;
    let arrFile = [];
    while (fileStart < size) {
        var fileInfo = {
            File: file.slice(fileStart, fileEnd),
            Start: fileStart,
            End: fileEnd
        };
        arrFile.push(fileInfo);
        fileStart = fileEnd;
        fileEnd = fileStart + bufferSize; 
    }
    let count = arrFile.length;
    // 获取文件名
    var fileNameText = $('<div>').html(file.name);
    var progressBar = $('<div>').html('0%').addClass('progress-bar'); // 创建新的进度条元素
    progressBars.push(progressBar); // 将新元素添加到数组中
    $('#progressContainer').append(fileNameText, progressBar); // 将新元素添加到页面中

    var formData = new FormData();
    formData.append('playlist', selectedPlaylist);
    formData.append('file', file); // 将整个文件添加到formData里
    formData.append('Name', file.name);
    formData.append('Count', count);
    formData.append('Size', size);
    // ... 其他参数

    for (var j = 0; j < count; j++) {
        formData.append('Number', j);
        formData.append('BufferStart', arrFile[j].Start);
        formData.append('BufferEnd', arrFile[j].End);
        formData.set("fileArray", arrFile[j].File, arrFile[j].Start + "-" + arrFile[j].End);//增加区块文件名

        $.ajax({
            url: "/Home/RuleUploadFile",
            type: "POST",
            data: formData,
            processData: false,  // 不处理数据
            contentType: false,  // 不设置内容类型
            xhr: function () {
                var xhr = new window.XMLHttpRequest(); 
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var percentComplete = (e.loaded / e.total) * 100;
                        // 更新相应的进度条元素
                        progressBar.html(percentComplete.toFixed(2) + '%');
                        progressBar.css('width', percentComplete + '%');
                    }
                }, false);
                return xhr;
            },
            success: function (response) {
                console.log("文件上传成功"); 
            },
            error: function (xhr, status, error) {
                console.error("文件上传失败:", error);
            }
        }); 
    }  
}

在这个修改的代码中，我将创建进度条的操作放到了外层循环中，并且移除了内层循环中更新进度条的代码。这样每个文件只有一个对应的进度条，避免了文件对应多个进度条的情况。同时，我也重新组织了 FormData 的构建逻辑，确保了整个文件和分片数据都能正确地添加到其中。希望这对你有帮助！

如果上传多个文件(歌曲) 每个文件(歌曲)的进度条都会被重置更新

为了避免每个文件的进度条都被重置更新，你可以使用一个对象来维护每个文件对应的进度条元素，这样就可以确保每个文件的进度条不会被重置。以下是对你的代码做出修改的示例：

var files = e.target.files; 
var progressBars = {}; // 使用对象来保存每个文件对应的进度条元素
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var fileStart = 0;
    let size = file.size; // 文件大小
    let bufferSize = 8 * (1024 * 1024); // 分片大小设置为8MB
    let fileEnd = bufferSize;
    let arrFile = [];
    while (fileStart < size) {
        var fileInfo = {
            File: file.slice(fileStart, fileEnd),
            Start: fileStart,
            End: fileEnd
        };
        arrFile.push(fileInfo);
        fileStart = fileEnd;
        fileEnd = fileStart + bufferSize; 
    }
    let count = arrFile.length;
    // 获取文件名
    var fileNameText = $('<div>').html(file.name);
    var progressBar = $('<div>').html('0%').addClass('progress-bar'); // 创建新的进度条元素
    progressBars[file.name] = progressBar; // 使用文件名作为键保存对应的进度条元素
    $('#progressContainer').append(fileNameText, progressBar); // 将新元素添加到页面中

    var formData = new FormData();
    formData.append('playlist', selectedPlaylist);
    formData.append('file', file); // 将整个文件添加到formData里
    formData.append('Name', file.name);
    formData.append('Count', count);
    formData.append('Size', size);
    // ... 其他参数

    for (var j = 0; j < count; j++) {
        formData.append('Number', j);
        formData.append('BufferStart', arrFile[j].Start);
        formData.append('BufferEnd', arrFile[j].End);
        formData.set("fileArray", arrFile[j].File, arrFile[j].Start + "-" + arrFile[j].End);//增加区块文件名

        // 使用闭包来保存对应的进度条元素
        (function(progressBar) {
            $.ajax({
                url: "/Home/RuleUploadFile",
                type: "POST",
                data: formData,
                processData: false,  // 不处理数据
                contentType: false,  // 不设置内容类型
                xhr: function () {
                    var xhr = new window.XMLHttpRequest(); 
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            var percentComplete = (e.loaded / e.total) * 100;
                            // 更新相应的进度条元素
                            progressBar.html(percentComplete.toFixed(2) + '%');
                            progressBar.css('width', percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                success: function (response) {
                    console.log("文件上传成功"); 
                },
                error: function (xhr, status, error) {
                    console.error("文件上传失败:", error);
                }
            });
        })(progressBars[file.name]); // 传入对应的进度条元素
    }
}

在这个修改后的代码中，我使用了一个对象progressBars来保存每个文件对应的进度条元素，以文件名作为键。在循环中为每个文件创建进度条，并将进度条元素存储在progressBars对象中。在处理上传时，使用闭包的方式保存对应的进度条元素，并在进度更新时更新正确的进度条元素。这样每个文件的进度条就可以正确地显示并避免被重置更新。希望对你有所帮助！

_EOF_

sqlite数据库

本文链接： https://starx.cc/blog/post/390e3286c1843e80.html

关于博主： 欢迎扫码加好友，交流技术 & 分享经验！

「博主」专注于互联网热门新技术探索与开发实践，包括架构设计、机器学习与数据分析算法、移动端开发、Linux~ 我都不会，欢迎一起探讨技术，分享学习实践经验。

随机推荐文章

讨论区

共 {{comments.length}} 条讨论

良言一句三冬暖，恶语伤人六月寒。

@{{replyComment.anonymousUser.name}}

刷新

重置

发表

首次发言：{{comment.anonymousUser.createdTime}}
网站地址：{{comment.anonymousUser.url}}

@{{comment.replyUser}} {{comment.content}}

Contact~

分片传输后记

如果上传多个文件(歌曲) 每个文件(歌曲)的进度条都会被重置更新

sqlite数据库

讨论区

{{comment.anonymousUser.name}}

{{comment.anonymousUser.name}}