PHP $_FILES Not Working with JQuery Json

Question

I'm building a form with JQuery and PHP and everything seem to work accept the file upload. Json doesn't seem to like the $_FILES. The form uploads fine when javascript is turned off. Is this a known issue? If it is, is there a work around? How do JQuery plugins manage to do this?

Thank you!

JQUERY:

$('#mcContactForm').submit(function(e){
    e.preventDefault();

    // validate form
    mcValidateForm();

    // serialize and submit form data
    $('.mcloading').show();
    var mcFormData = $(this).serialize();
    mcSubmitForm(mcFormData);

    // -----------------------------------------------
    // AJAX FORM SUBMIT
    // -----------------------------------------------
    function mcSubmitForm(mcFormData){
        $.ajax({
            type: 'POST',
            url: 'contact.php',
            data: mcFormData,
            dataType: 'json',
            cache: false,
            timeout: 7000,
            success: function(data) {
                if(data.error === true){

                    ...
                }
                else if(data.error === false){

                    ...
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
                ...
            },              
            complete: function(XMLHttpRequest, status) { 
                ...
            }
        });
    }
});

Could you show us your code maybe? :) That wourld REALLY help — Deleteman
– Deleteman, Commented Jan 6, 2012 at 20:07
I just read that serialize() does not submit file input fields. That is the core of the question. Is there a workaround for this? — user1002039
– user1002039, Commented Jan 6, 2012 at 20:14
@user1002039, yes, the workaround is to submit to a hidden iframe field instead of using ajax. there are many query plugins that do this for you. see my answer. — Ben Lee
– Ben Lee, Commented Jan 6, 2012 at 20:15

Ben Lee · Accepted Answer · 2012-01-06 20:13:53Z

2

It sounds like maybe you are trying to upload files via ajax and discovering that this can't be done by simply sending the form parameters back via regular ajax? If so, what you need is an ajax file upload plugin. See here for some possibilities:

http://www.webdeveloperjuice.com/2010/02/13/7-trusted-ajax-file-upload-plugins-using-jquery/

These typically use a system of submitting to hidden iframes to do the uploads.

answered Jan 6, 2012 at 20:13

Ben Lee

53.5k15 gold badges129 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1002039 Over a year ago

Thank you! Is there a tutorial on how to do the hidden iframe submission. I'm not even sure what that means. I have nothing against plugins but I'd like to learn how this is done.

Ben Lee Over a year ago

Well hidden iframe submission is not completely simple, that's why I'd recommend a plugin for it. But what it means basically is you create an iframe with "display: none" style (so the user can't see it). And then set the target attribute of your form to the name of the frame. This will make it submit as if it were in that frame. Then you set up javascript event handlers to catch when the upload is done based on some details in the iframe, and then have the iframe communicate back to the parent to finish the process.

Ben Lee Over a year ago

It's actually kind of a difficult-to-roll-own process even though it is straightforward in concept. A plugin will let you do all that in one line of code though.

Collectives™ on Stack Overflow

PHP $_FILES Not Working with JQuery Json

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related