Como faço para mandar um formulário via $.post com um input tipo file onde o form tenha enctype="multipart/form-data"? Todos os outros campos fazem a inserção o problema que o arquivo não passo pois não ler como enctype="multipart/form-data".
1 Resposta
Resposta curta: não passa!
O método jQuery.post()
"aka" $.post()
foi desenhado para "carregar dados do servidor utilizando uma solicitação HTTP POST
" os parâmetros do tipo String ou PlainObject são opcionais, embora estes parametros sirvam apenas para atender requisitos da solicitação é muito comum utilizá-los para enviar dados ao servidor más, não há suporte a multiparty/form-data
neste método.
A estrutura deste método é a seguinte:
jQuery.post( url [, data ] [, success ] [, dataType ] )
Onde todos os parâmetros com exceção da url
são opcionais. Documentação oficial.
Como fazer então?
Simples, utilize o método jQuery.ajax()
"aka" $.ajax()
que aceita inúmeras opções de configuração. Documentação oficial.
A estrutura do método $.ajax()
segue a seguinte base:
jQuery.ajax( url [, settings ] )
Como podes notar o parâmetro de configurações (PlainObject) são opcionais más, não é necessário declarar explicitamente o primeiro argumento url
caso você defina configurações e esta tenha (contenha) uma "url" exemplo:
$.ajax({
url: 'https://awesomedomain.com'
})
Um exemplo completo:
<!DOCTYPE html>
<html>
<head>
<title>Titulo</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" id="fileUploadForm">
<input type="text" name="extraField"><br><br>
<input type="file" name="files"><br><br>
<input type="file" name="files"><br><br>
<input type="submit" value="Submit" id="btnSubmit">
</form>
<!-- load jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
// evento de "submit"
$("#btnSubmit").click(function (event) {
// parar o envio para que possamos faze-lo manualmente.
event.preventDefault();
// capture o formulário
var form = $('#fileUploadForm')[0];
// crie um FormData {Object}
var data = new FormData(form);
// caso queira adicionar um campo extra ao FormData
// data.append("customfield", "Este é um campo extra para teste");
// desabilitar o botão de "submit" para evitar multiplos envios até receber uma resposta
$("#btnSubmit").prop("disabled", true);
// processar
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "/coolurl/upload",
data: data,
processData: false, // impedir que o jQuery tranforma a "data" em querystring
contentType: false, // desabilitar o cabeçalho "Content-Type"
cache: false, // desabilitar o "cache"
timeout: 600000, // definir um tempo limite (opcional)
// manipular o sucesso da requisição
success: function (data) {
console.log(data);
// reativar o botão de "submit"
$("#btnSubmit").prop("disabled", false);
},
// manipular erros da requisição
error: function (e) {
console.log(e);
// reativar o botão de "submit"
$("#btnSubmit").prop("disabled", false);
}
});
});
});
</script>
</body>
</html>
Outros tópicos similares aqui na comunidade: