使用 FormData 和 jQuery 上传 Ajax 大文件无法发布数据

Posted

技术标签:

【中文标题】使用 FormData 和 jQuery 上传 Ajax 大文件无法发布数据【英文标题】:Ajax large-ish file upload with FormData and jQuery fails to post the data 【发布时间】:2016-03-22 17:56:08 【问题描述】:

我正在尝试使用 FormData 通过 AJAX 上传文件。如果我在没有选择要上传的任何文件的情况下提交 AJAX 调用,则帖子可以正常工作,并且服务器上会收到其他字段(不是文件上传)。但是,如果我选择要上传的文件,则调用到达服务器时没有任何数据(在 php 中,$_POST 和 $_FILES 数组都是完全空的)。我知道如果你没有告诉 jQuery 不要设置 contentType,就会发生这种情况,但是我将 contentType 和 processData 设置为 false,它仍然不会发送数据。

这是我的代码:

function AddComment(taskid) 
    var newnote = $('#newnote_'+taskid).val();
    if(newnote != '') 
        $('#tasklist *').css('cursor', 'progress');
        var formData = new FormData();

        $('.upload-' + taskid).each(function() 
            if (this.files[0]) 
                formData.append($(this).attr('name'), this.files[0]);
            
        );
        formData.append("taskid", taskid);
        formData.append("newnote", newnote);

        $.ajax(
            url: '/modules/task/ajax/ajaxAddComment.php',
            data: formData,
            processData: false,
            contentType: false,
            type: 'post',
            success: function(data)
                alert(data);
            
        );
    

我确定我在做一些愚蠢的事情,但我看不到什么......?

编辑:这是 html

<form id="frmNewComment544" enctype="multipart/form-data" method="post" action="">
<div>
    <textarea style="width:100%;" cols="30" rows="5" id="newnote_544"></textarea>
</div>
<div>
    <input type="button" onclick="AddComment(544)" value="Append Comment">    
</div>
<div class="attachment-browsers" id="attachmentBrowsers544" style="display: block;">Attachments will be uploaded when you append a comment.
    <div>
        <input type="file" id="upload_544_151ab3cfe69" name="upload_544_151ab3cfe69" class="upload-544">
    </div>
    <div>
        <input type="file" id="upload_544_3y4afe6eg7a" name="upload_544_3y4afe6eg7a" class="upload-544">
    </div>
</div>
</form>

编辑 2:好的,只有在上传相对较大的文件时才会出现问题(不是很大 - 在本例中为 10MB)。小文件上传OK。那么现在的问题是为什么我不能使用这种方法上传大文件?

【问题讨论】:

你也可以张贴html 表格吗? 请用console.log()检查所有参数,检查任何失败都会破坏post data send failed。 【参考方案1】:

我知道这会很愚蠢!

我的 php.ini 文件上传有默认的 2MB 限制。哦。

【讨论】:

【参考方案2】:

我没有看到对您的表单的任何引用。 也许你会这样做:

.....

      var form = $('form#frmNewComment544');

        var formdata = false;

        if (window.FormData)
            formdata = new FormData(form[0]);
        

        var formAction = form.attr('action');

        $.ajax(
            url: formAction,
            data : formdata ? formdata : form.serialize(),

....

【讨论】:

谢谢,我尝试在构造函数中传递表单而不是附加数据,但结果是一样的。 我刚刚看到你更新了你的问题。所以这现在是你原来的东西了。 我确实编辑了我的问题以发布表单 HTML,但是,该代码适用于小文件,而不适用于较大的文件 (10MB)。所以我不认为这样的代码有什么问题,我只是达到了某种限制(但我不知道是什么)。 我想你比我更了解 'php.ini' 中的 'max_file_size'。我还看到您正在上传多个文件。小文件可以全部上传吗? 如果您将 PHP 作为 apache 模块运行,您需要重新启动 apache 才能对 php.ini 所做的更改生效。还要确保 file_uploads 已打开,并且您的 post_max_size 至少与 upload_max_filesize 相同

以上是关于使用 FormData 和 jQuery 上传 Ajax 大文件无法发布数据的主要内容,如果未能解决你的问题,请参考以下文章

使用 FormData 和 jQuery 上传 Ajax 大文件无法发布数据

通过jQuery Ajax使用FormData对象上传文件

通过jQuery Ajax使用FormData对象上传文件

在 iOS 上未选择文件时,JavaScript 使用 FormData 和 jQuery 的 ajax 上传文件返回错误 500

通过jQuery Ajax使用FormData对象上传文件

在 Spring Boot App 中使用 Jquery 和 FormData 提交表单字段并上传 File 到 Spring MVC Controller