I have no idea how to implement this, let me try to explain
I have a form that open inside a bootstrap modal frame in my layout, in this form i have 2 fields
<input type="file" name="photoimg" id="photoimg" value="" />
<input type="hidden" name="consulta" value="5">
I need to submit this to my url with the value 5 for 'consulta' so the script can read and do the proper things with the file,
BUT
I need to do this without refreshing the opened modal, in other words, using ajax to submit the file (for further cropping)
i have this script that do the submit, what i'm doing wrong here?
<script type="text/javascript">
function enviaimagem(){
$.ajax({
type: "POST",
data: { consulta:5 },
dataType: 'html',
url: "<?=JURI::ROOT()?>ajax.html",
//dataType: "html",
success: function(result){
$("#corpo_modal").html('');
$("#corpo_modal").html(result);
},
beforeSend: function(){
$("#corpo_modal").html('');
$("#corpo_modal").css({display:"none"});
$('#ajaxloadergeneric').css({display:"block"});
},
complete: function(msg){
$('#ajaxloadergeneric').css({display:"none"});
$("#corpo_modal").css({display:"block"});
}
});
}
</script>
File upload through AJAX is supported through FormData object:
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
, however it is not supported by all/old browsers( especially IE < 10)