php - JQuery Ajax - Dynamic created input elements want to be able to upload with Ajax submit -

i have jquery file dynamically creates input elements. 1 of elements uploading image file. when user clicks save add database via ajax. want ability able upload on same save click. not able file element submit.

below jquery:

var trcopy; var editing = 0; var tdediting = 0; var editingtrid = 0; var editingtdcol = 0; var inputs = ':checked,:selected,:text,textarea,select,:hidden,:checkbox,:file'; var nothidden = ':checked,:selected,:text,textarea,select,:file';  $(document).ready(function(){  // set images edit , delete  $(".eimage").attr("src",editimage); $(".dimage").attr("src",deleteimage);    // init table     blankrow = '<tr valign="top" class="inputform"><td></td>';    for(i=0;i<columns.length;i++){         // create input element per definition         //first elements in array hidden fields          if(columns[i] == '_fk_po_req_id'){                input = createinput(i,'');               blankrow += input;          }else{              input = createinput(i,'');              blankrow += '<td class="ajaxreq" style="text-   align:center;">'+input+'</td>';          }       }       blankrow += '<td><a href="javascript:;" class="'+savebutton+'"><img  src="'+saveimage+'"></a></td></tr>';     // append blank row @ end of table     $("."+table).append(blankrow);       // add new record     $("."+savebutton).on("click",function(){  //     alert('save clicked');          var validation = 0;         var $inputs =        $(document).find("."+table).find(inputs).filter(function() {         // check if input element blank ??         //if($.trim( this.value ) == ""){ //              $(this).addclass("error"); //              validation = 0; //          }else{ //              $(this).addclass("success"); //          }         validation = 1;         return $.trim( this.value );     });      var array = $inputs.map(function(){         console.log(this.value);         console.log(this);         return this.value;     }).get();      var serialized = $inputs.serialize();     alert(serialized);     if(validation == 1){         ajax(serialized,"save");     } });  createinput = function(i,str){     str = typeof str !== 'undefined' ? str : null;     //alert(str);     if(inputtype[i] == "text"){     input = '<input class="input-small" type='+inputtype[i]+' name="'+columns[i]+'" placeholder="'+placeholder[i]+'" value="'+str+'" >';   }else if(inputtype[i] == "file"){     input = '<input class="input-small" type='+inputtype[i]+' name="new_receipt" placeholder="'+placeholder[i]+'" value="'+str+'" >'; }else if(inputtype[i] == "textarea"){     input = '<textarea name="'+columns[i]+'" placeholder="'+placeholder[i]+'">'+str+'</textarea>'; }else if(inputtype[i] == "hidden"){     input = '<input type="'+inputtype[i]+'" name="'+columns[i]+'" value="'+hiddenval[i]+'" >'; }else if(inputtype[i] == "checkbox"){     input = '<input type="'+inputtype[i]+'" name="'+columns[i]+'" value="'+str+'" >'; }else if(inputtype[i] == "select"){     input = '<select class="input-medium" name="'+columns[i]+'">';     for(i=0;i<selectopt.length;i++){ //          console.log(selectopt[i]);         selected = "";         if(str == selectopt[i])             selected = "selected";         input += '<option value="'+selectopt[i]+'" '+selected+'>'+selectopt[i]+'</option>';     }     input += '</select>';  }    return input; } ajax = function (params,action){  // alert(params);  // alert(action);  $.ajax({     type: "post",      url: "ajax.php",      data : params+"&action="+action,     datatype: "json",     success: function(response){       switch(action){         case "save":             var seclastrow = $("."+table+" tr").length;         //  alert(response.success);             if(response.success == 1){                 var html = "";                  html += "<td>"+parseint(seclastrow - 1)+"</td>";                 for(i=0;i<columns.length;i++){                     if(columns[i] == '_fk_po_req_id'){                         html +=  '';                     }else{                         html +='<td  style="text-align:center" class="'+columns[i]+'">'+response[columns[i]]+'</td>';                     }                 }                 html += '<td><a href="javascript:;" id="'+response["id"]+'" class="ajaxedit"><img src="'+editimage+'"></a> <a href="javascript:;" id="'+response["id"]+'" class="'+deletebutton+'"><img src="'+deleteimage+'"></a></td>';                 // append new row second last row of table                 $("."+table+" tr").last().before('<tr id="'+response.id+'">'+html+'</tr>');                  if(effect == "slide"){                     // little hack animate tr element smoothly, wrap in div , replace again replace td , tr's ;)                     $("."+table+" tr:nth-child("+seclastrow+")").find('td')                      .wrapinner('<div style="display: none;" />')                      .parent()                      .find('td > div')                      .slidedown(700, function(){                           var $set = $(this);                           $set.replacewith($set.contents());                     });                 }                 else if(effect == "flash"){                    $("."+table+" tr:nth-child("+seclastrow+")").effect("highlight",{color: '#acfdaa'},100);                 }else                    $("."+table+" tr:nth-child("+seclastrow+")").effect("highlight",{color: '#acfdaa'},1000);                  // blank input fields                   $(document).find("."+table).find(inputs).filter(function() {                     // check if input element blank ??                     this.value = "";                     $(this).removeclass("success").removeclass("error");                 });             }         break;        }     },     error: function(){         alert("unexpected error, please try again");     }   }); 

}

you cannot upload file regular form field when use ajax.

there 2 solutions that:

1. use formdata. work in modern browswers;
2. use jquery file upload plugin. necessary if need support browsers not support formdata: internet explorer 9 , below.

you can find nice explanation of use of formdata here on so: how use formdata ajax file upload