About time we can do this! Check it out! In the example below my file input is called #evidence. The dataType option sets what jQuery can expect to receive back in the response, in this case, I send back JSON.

                var jform = new FormData();
                jform.append('supply_id',supply_id);
                jform.append('fuel_usage',$('#fuel_usage').val());
                jform.append('cost',$('#cost').val());
                jform.append('currency',$('#currency').val());
                jform.append('reading',$('#reading').val());
                jform.append('data_source',$('#data_source').val());
                jform.append('date_from',$('#date_from').val());
                jform.append('date_to',$('#date_to').val());
                jform.append('evidence',$('#evidence').get(0).files[0]);
                jform.append('comments',$('#comments').val());
                
                $.ajax({
                    url: '/your-form-processing-page-url-here',
                    type: 'POST',
                    data: jform,
                    dataType: 'json',
                    mimeType: 'multipart/form-data',
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function(data, status, jqXHR){
                        alert('Hooray! All is well.');
                        console.log(data);
                        console.log(status);
                        console.log(jqXHR);
                        
                    },
                    error: function(jqXHR,status,error){
                        // Hopefully we should never reach here
                        console.log(jqXHR);
                        console.log(status);
                        console.log(error);
                    }
                });
Advertisements