webapp - 分块上传大文件？答案

【问题标题】：webapp - uploading big file in chunks?webapp - 分块上传大文件？
【发布时间】：2011-02-19 15:56:18
【问题描述】：

我想知道是否可以通过以下方式以小块上传一个非常大的文件（超过 60MB 左右..）：

使用 javascript 将文件拆分成小的单个文件
并发发送到服务器端
使用php将上传的小文件合并在一起
最后存储它们并用它做点什么..

这可能吗？

我想做的原因是克服 php 对我的服务器上可用/允许的最大上传文件大小的限制 - 我知道你可以配置 php ini 和 apache 的东西，但我不是管理员，他不能这样做我公司内部的安全原因..

【问题讨论】：

标签： php javascript web-applications

【解决方案1】：

这是可能的，但仅限于某些浏览器。 Here's the documentation on the file api。我不相信 IE6-8 支持这个。因此，当我需要这样做时，我必须编写将块发送到闪存中的服务器的前端。

【讨论】：

【解决方案2】：

截至 2018 年有 JavaScript API 用于此，首先您需要使用 Blob.slice 或其前缀版本对文件进行切片，然后使用 FormData 发送块。服务器需要将块附加到文件的末尾，因此您需要在开始之前删除旧文件（如果存在）。

在我的项目中，我正在使用此代码：

Uploader.prototype.upload_by_chunks = function upload_by_chunks(file, path, chunk_size) {
    var self = this;
    chunk_size = chunk_size || 1048576; // 1MB
    var defered = $.Deferred();
    function slice(start, end) {
        if (file.slice) {
            return file.slice(start, end);
        } else if (file.webkitSlice) {
            return file.webkitSlice(start, end);
        }
    }
    var i = 0;
    function process(start, end) {
        if (start < file.size) {
            var chunk = slice(start, end);
            var formData = new FormData();
            formData.append('file', chunk, file.name);
            formData.append('token', self.token);
            formData.append('path', path);
            $.ajax({
                url: 'lib/upload.php?append=1',
                type: 'POST',
                success: function(response) {
                    if (response.error) {
                        self.error(response.error);
                        defered.reject();
                    } else {
                        process(end, end+chunk_size);
                    }
                },
                error: function(jxhr, error, status) {
                    self.error(jxhr.statusText);
                    defered.reject();
                },
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            });
        } else {
            self.leash.terminal.echo('File "' + file.name + '" uploaded.');
            defered.resolve();
        }
    }
    var fname = path + '/' + file.name;
    this.leash.service.unlink(self.token, fname)(function(err, del) {
        if (err) {
            self.error(err);
            defered.reject();
        } else {
            process(0, chunk_size);
        }
    });
    return defered.promise();
};

在我按块上传之前，我会检查这个条件：

file.size > self.leash.settings.upload_max_filesize

常量取自php：

$upload_limit = intval(ini_get('upload_max_filesize')) * 1024 * 1024;

【讨论】：