Fazendo upload de dados e arquivos em um formulário usando o Ajax?
Eu estou usando jQuery e Ajax para os meus formulários para enviar dados e arquivos, mas não sei como enviar dados e arquivos em um formulário?
Atualmente faço quase o mesmo com os dois métodos, mas a maneira pela qual os dados são reunidos em um array é diferente, os dados são usados.serialize();
mas os arquivos usam= new FormData($(this)[0]);
É possível combinar os dois métodos para poder carregar arquivos e dados em um formulário através do Ajax?
Dados jQuery, Ajax e 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>
Arquivos jQuery, Ajax e 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>
Como posso combinar os itens acima para que eu possa enviar dados e arquivos em um formulário via Ajax?
Meu objetivo é poder enviar todo este formulário em um post com o Ajax, é possível?
<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>