javascript - 使用 JavaScript 或 jQuery 拆分文件

Question

我需要上传文件的一部分(仅前 MB)。我创建了一个上传整个文件的 PHP 脚本。数据(formData 对象)通过 ajax 调用传递。

我现在的想法是用 javascript (jquery) 拆分文件。我的要求有解决方案吗？

当前代码:

function start(a){
    //var fSize = $('#fileUpload')[0].files[0].size / 1024;
    var formData = new FormData();    
    formData.append( 'fileUpload', $('#fileUpload')[0].files[0] );
    //AJAX
    $.ajax({
        url: 'script.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(msg){
            alert("Win: " + msg);
        },
        error: function(bla, msg){
            alert("Fail: " + msg);
        }
    });
}

Answer 1

由于您正在使用 FormData，这是一项相当新的技术，我也会向您展示一些新技术。

首先，使用FileReader 对象读取文件:

var fr = new FileReader(), buf, file = $('#fileUpload')[0].files[0];
fr.onload = function(e) {
    buf = new Uint8Array(e.target.result);
};
fr.readAsArrayBuffer(file);

然后您可以为每个拆分的部分创建一个Blob(每个1e6 字节长):

for (var i = 0, blobs = []; i < buf.length; i += 1e6)
    blobs.push(new Blob([buf.subarray(i, i + 1e6)]));

最后，您可以将所有 Blob 添加到您的 FormData 对象中:

var formData = new FormData();
for (var i = 0; i < blobs.length; i++)
    formData.append("slice" + i, blobs[i], file.name + ".part" + i);

你应该没事的。不过，我还没有测试过。

我对表演一无所知。您也可以使用 fr.readAsBinaryString，从而使 e.target.result 成为一个字符串。这样，您可以使用简单的 substring/slice/substr/whatever 创建 Blob，但是我担心 Unicode 字符和诸如此类的东西可能会出现一些问题。另外，也许它更慢。

将所有内容放在更连贯的片段中:

$('#fileUpload').change(function() {
    // If no file is selected, there's nothing to do
    if (!this.files.length) return;

    var fr = new FileReader(), file = this.files[0];
    fr.onload = function(e) {
        splitAndSendFile(new Uint8Array(e.target.result), file);
    };
    fr.readAsArrayBuffer(file);
};

function splitAndSendFile(dataArray, file) {
    var i = 0, formData, blob;
    for (; i < dataArray.length; i += 1e6) {
        blob = new Blob([dataArray.subarray(i, i + 1e6)]);
        formData = new FormData();
        formData.append("fileUpload", blob, file.name + ".part" + (i / 1e6));
        $.ajax({
            url: 'script.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(msg){
                alert("Win: " + msg);
            },
            error: function(bla, msg){
                alert("Fail: " + msg);
            }
        });
    }
}

注意:FormData.append 接受第三个可选参数，如果是File 或，它应该是文件名>Blob 值。如果未指定，Blob 可能会获得不可预测的随机文件名。

可能该参数不是标准参数，并且在 MDN artice 中未提及，但我还是在上面的代码片段中使用了它。不管怎样，如果您知道自己在做什么，您可以有几个选项来指定文件名。例如，使用 formData.append("filename", file.name) 或在请求中发送自定义 header 。