javascript FileReader上传'请求实体太大'

时间:2015-09-09 17:14:50

标签: javascript ajax google-chrome file-upload upload

我正在尝试解决在Chrome中通过ajax上传时从请求中删除的文件。

删除或浏览文件时,我使用FileReader准备文件:

    // initialise fileListData array
    fileListData = new Array(fileList.length);

    // start reading files
    for (var i=0; i<fileList.length; i++) {

        // update fileListData file status
        fileListData[i] = { 'name': fileList[i].name, 'processing' : 1 };

        // read file
        var fileReader = new FileReader();

        fileReader.onload = (function(idx) {
            return function(e) {
                // update fileListData data
                setFilesAreReady(idx, e.target.result);
            }
        })(i);

        fileReader.readAsDataURL(fileList[i]);
    }

方法setFilesAreReady只是将FileReader结果存储到fileListData数组中,然后检查数组中的所有项是否都已完成处理(以便它可以启用上传按钮)。

文件读取完成后,启用上传按钮并开始点击上传以发出ajax请求:

if (is_chrome || is_safari) {
    formData.append('upfile_0', ajax_uploads[file_idx].fileData);
    console.log(ajax_uploads[file_idx].fileData);
} else {
    formData.append('upfile_0', file);
}
formData.append('event', eventVal);
formData.append('filePrivacy', filePrivacyVal);

首先我编译一个formData对象然后用请求提交它:

    // start upload
    jQuery.ajax(
    {
        data:       formData,
        url:        path_to_upload_script + '?upload_id=' + upload_id,
        type:       "POST",
        processData:    false,
        contentType:    false,
        error:
            function (jqXHR, textStatus, errorThrown)
            {
                ...
            },
        success: 
            function (response) 
            {
                ...
            }
    });

    // start ajax progress
    initialiseAjaxProgressBar(upload_id);
}

我遇到的问题是,如果超过几兆字节,则上传的文件会出现Request Entity Too Large错误:

Request Entity Too Large

但服务器实际上配置为接受高达250MB的文件。我正在使用优步上传器(perl脚本),这可以处理大文件上传。 ajax上传适用于firefox和Internet Explorer中的大文件,因此这个FileReader解决方案只适用于chrome(和safari)。

我猜这个错误发生是因为内容类型错误,因为我上传了数据字符串而不是js文件对象。

如何使用我在ajax请求中附加到formData的其他参数正确上传FileReader结果(看起来像data:video/mp4;base64,...)?

1 个答案:

答案 0 :(得分:0)

最后我使用了名为plupload的漂亮库。它将文件拆分为1mb块以绕过请求实体太大的问题。该文件在服务器上重建。这也允许非常大的上传,因为每个块都没有超过PHP的post max size。