I'm submitting the form through ajax using jquery serialization function

Question

var values = $('#form_field').serialize();
dataS = "val="+values;

$.ajax({
    type: "POST",
    url: URL,
    data: dataS,
    cache: false, 
    dataType: 'json',
    success: function(response) 
    { },
});

But the form has an ( <input type="file"> field) how do I pass the file into the form using this ajax serialization method. When I print $_FILES doesn't getting any output.

Answer 1

You can't past the $_FILES variable when using ajax. I can assure you that. Thanks.

Answer 2

Ajax does not support file uploads, you should use iframe instead. you can check further detail here

Answer 3

Posting via Ajax file upload isn't straight forward. First, it isn't directly doable using XHR1.

There are two main ways to do the uploads, using a frame and using the XHR2 spec and the FormData object. This is the method I would recommend.

The easiest way to do this is then to perform two uploads. I'm going to borrow some code here, from GitHub user optikalefx to show you how to do it using jQuery:

// Ajax File upload with jQuery and XHR2
// Sean Clark http://square-bracket.com
// xhr2 file upload
    // data is optional
    $.fn.upload = function(remote,data,successFn,progressFn) {
        // if we dont have post data, move it along
        if(typeof data != "object") {
            progressFn = successFn;
            successFn = data;
        }
        return this.each(function() {
            if($(this)[0].files[0]) {
                var formData = new FormData();
                formData.append($(this).attr("name"), $(this)[0].files[0]);

                // if we have post data too
                if(typeof data == "object") {
                    for(var i in data) {
                        formData.append(i,data[i]);
                    }
                }

                // do the ajax request
                $.ajax({
                    url: remote,
                    type: 'POST',
                    xhr: function() {
                        myXhr = $.ajaxSettings.xhr();
                        if(myXhr.upload && progressFn){
                            myXhr.upload.addEventListener('progress',function(prog) {
                                var value = ~~((prog.loaded / prog.total) * 100);

                                // if we passed a progress function
                                if(progressFn && typeof progressFn == "function") {
                                    progressFn(prog,value);

                                // if we passed a progress element
                                } else if (progressFn) {
                                    $(progressFn).val(value);
                                }
                            }, false);
                        }
                        return myXhr;
                    },
                    data: formData,
                    dataType: "json",
                    cache: false,
                    contentType: false,
                    processData: false,
                    complete : function(res) {
                        var json;
                        try {
                            json = JSON.parse(res.responseText);
                        } catch(e) {
                            json = res.responseText;
                        }
                        if(successFn) successFn(json);
                    }
                });
            }
        });
    };

I should also note that browser support for this is a little more limited, despite XHR2 being around for 2 years now: https://developer.mozilla.org/en-US/docs/Web/API/FormData contains more information as well as a Browser compatibility chart.