javascript - jQuery Form Plugin: ajaxForm() not working with file upload -

here's issue i'm having .ajaxform() method of jquery form plugin. keep things understandable possible, i've included of salient info in comments snippets below.

tested in both chrome , firefox, , form_2 post server once select file upload. problem deal_upload_image_file input not being included post, server not receiving file.

html:

<!-- form_1: big form, need position file input field in here, --> <!-- don't want submit file form                 --> <form id="edit_deal_form">   <div id="upload_image_div">     <!-- javascript appends "deal_upload_image_file" input here, -->     <!-- appends form_2 when file selected                     -->   </div> </form>  <!-- form_2: second form not visible user , --> <!-- post of  multipart data                --> <form id="deal_upload_image_form" name="upload_image_form" method="post" enctype="multipart/form-data" action="/upload_image" accept-charset="utf-8"> </form> 

javascript:

$(function() {   add_upload_image_elements(); });  // add deal_upload_image_file input form_1, , add onchange handler // post server once file has been selected function add_upload_image_elements() {     $('<input>').attr("id", "deal_upload_image_file").attr("name", "deal_upload_image_file").attr("type", "file").appendto($('#upload_image_div'));     $('#deal_upload_image_file').change(function () {         upload_image();         return false;     }); }  // move file input form_2, set ajaxform handler, // , call submit() on form_2. // // clean up, clear file input field , add form_1. function upload_image() {     // input field not getting posted form_2     // though append here!!!     $('#deal_upload_image_file').appendto($('#deal_upload_image_form'));      $('#deal_upload_image_form').ajaxform({         success: function(response) {             alert("success callback");         },         error: function(response) {             alert("error callback");         }     });     $('#deal_upload_image_form').submit();      // clean     $('#deal_upload_image_file').remove();     add_upload_image_elements(); } 

thanks!

if don't consider old browser compatibility, use new html5 apis. see answer: html 5 file upload