javascript - Submit form having file using java script submit button -

java-script : have form feed value controller via ajax call . form serialized in ajax call , controller return 'true' on success problem form have file , file can't serialized . working out how can receive file in controller using ajax call .

function save() {     if(save_method == 'on_submitted')      {           url = "<?php echo site_url('mycontroller/insertform')?>";             $.ajax({                 url : url,                 type: "post",                 data:$('#form_name').serialize(),                 datatype: "json",                 success: function(data)                 {                      if(data.status) //if success close modal , reload ajax table                     {                         $('#modal_name').modal('hide');                         alert('added successfully');                         reload_table();                     }                     else                     {                         (var = 0; < data.inputerror.length; i++)                          {                             $('[name="'+data.inputerror[i]+'"]').parent().parent().addclass('has-error'); //select parent twice select div form-group class , add has-error class                             $('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string                         }                     }                     $('#btnsave').text('save'); //change button text                     $('#btnsave').attr('disabled',false); //set button enable                    },                 error: function (jqxhr, textstatus, errorthrown)                 {                     alert('error adding / update data');                     $('#btnsave').text('save'); //change button text                     $('#btnsave').attr('disabled',false); //set button enable                   }             });      } } 

when omit input file fields working fine , main problem send file controller via java-script . have tries don't know wrong , how can .

you should not use datatype: "json" if sending files.

you can form data request using (filesform = name of form):

var formdata = new formdata(document.forms.filesform); 

then add other keys:

formdata.append("key", keyvalue); 

and send data, add options ajax call:

contenttype: false, cache: false, processdata: false, 

you need contenttype = false (it multipart/form-data in fact) if wish upload files. , final ajax call should this:

$.ajax({     url: url,     data: formdata,     contenttype: false,     cache: false,     processdata: false,     type: 'post',     success: function (result) {         $("#result").html(result)     },     error: function (result) {         $("#result").html(result)     } });