CODEWITHSUNDEEP
phpjqueryajaxfile-uploadform-data
Russ
Russ

Reputation: 3956

Ajax large-ish file upload with FormData and jQuery fails to post the data

I am trying to upload files via AJAX using FormData. If I submit the AJAX call without selecting any files to upload, the post works fine, and other fields (that are not file uploads) are received on the server OK. If I select a file to upload though, the call arrives at the server with no data whatsoever (in PHP, the $_POST and $_FILES arrays are both completely empty). I understand this can happen if you fail to tell jQuery not to set the contentType, but I am setting contentType and processData to false and it still won't send the data.

Here is my code:

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);
            }
        });
    }
}

I'm sure I'm doing something stupid, but I can't see what...?

Edit: Here is the 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>

Edit 2: OK, the problem only occurs when uploading relatively large files (not massive - in this case it was 10MB). Small files upload OK. So now the question is why I cannot upload large files using this method?

Upvotes: 1

Views: 2011

Answers (2)

Russ
Russ

Reputation: 3956

I knew it would be something stupid!

My php.ini had the default 2MB limit for file uploads. D'oh.

Upvotes: 2

Franco
Franco

Reputation: 2329

I don't see any reference to your form. May be you would do it like this:

.....

      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(),

....

Upvotes: 0

Related Questions