1

I'm using jQuery and PHP to post a long dynamically created HTML Form. Since I need to have a "Sending" dialog and show the results on the same page (ideally in a jQuery popup), I do not use the traditional HTML form submit. What I'm doing works great except that File input types do not upload.

Is there a way to do this?

Here is my code:

jQuery:

    function submitForm(submiturl)
    {
        $.blockUI({ message: "<h2>Submitting...</h2>" }); 

        var form = $('#theForm').serialize();
        var fields = "<?= urlencode(serialize($allFields)) ?>";

        $.ajax({ 
            url: submiturl,
            data: {form: form, fields: fields, extraResults: window.extraResults},
            type: "post", 
            cache: false, 
            complete: function() { 
                // unblock when remote call returns 
                $.unblockUI(); 
            }, 
            error: function (xhr, ajaxOptions, thrownError) {
                alert("ERROR");

            },
            success: function( strData ){
                alert("SUCCESS:  " + strData);

            }

        }); 
    }
rmooney
  • 6,123
  • 3
  • 29
  • 29
  • 1
    See http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery – Adder May 22 '13 at 13:32
  • I've looked at that before and the jQuery form plugin looks like it would work, but I also need to send my fields and extraResults in the same post. They are needed for extra processing in the submit.php page. – rmooney May 22 '13 at 13:40
  • See http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – Schleis May 22 '13 at 13:45

1 Answers1

0

mention enctype="multipart/formdata" in the form and use this code in your function

 var uf = //get form id;
 var fd = new FormData(uf);     
 $.ajax({
   type: "POST",
   url: "xxxxx.php",
   data: fd,
   processData:false,
   contentType: false,
   success: function(msg){ }
 });
Sirko
  • 72,589
  • 19
  • 149
  • 183
Srikanth Kolli
  • 892
  • 1
  • 8
  • 19
  • Seems like a good approach but when I try it, the javascript freezes on new FormData(uf); Ideally, I would like support on all browsers (I don't think the FormData object is supported in IE < 10) but I would take this as a consolation if I can get it to work. – rmooney May 22 '13 at 15:14