¿Cargar datos y archivos de una forma usando Ajax?
Estoy usando jQuery y Ajax para que mis formularios envíen datos y archivos, pero no estoy seguro de cómo enviar los datos y los archivos de una forma.
Actualmente hago casi lo mismo con ambos métodos, pero la forma en que los datos se reúnen en una matriz es diferente, los datos utilizan.serialize();
pero los archivos usan= new FormData($(this)[0]);
¿Es posible combinar ambos métodos para poder cargar archivos y datos de una forma a través de Ajax?
Datos jQuery, Ajax y html.
$("form#data").submit(function(){
var formData = $(this).serialize();
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="data" method="post">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<button>Submit</button>
</form>
Archivos jQuery, Ajax y html.
$("form#files").submit(function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: window.location.pathname,
type: 'POST',
data: formData,
async: false,
success: function (data) {
alert(data)
},
cache: false,
contentType: false,
processData: false
});
return false;
});
<form id="files" method="post" enctype="multipart/form-data">
<input name="image" type="file" />
<button>Submit</button>
</form>
¿Cómo puedo combinar lo anterior para poder enviar datos y archivos de una forma a través de Ajax?
Mi objetivo es poder enviar todo este formulario en una publicación con Ajax, ¿es posible?
<form id="datafiles" method="post" enctype="multipart/form-data">
<input type="text" name="first" value="Bob" />
<input type="text" name="middle" value="James" />
<input type="text" name="last" value="Smith" />
<input name="image" type="file" />
<button>Submit</button>
</form>