Estou com uma dúvida que não achei nenhuma solução. Preciso enviar via Ajax uma imagem e outros campos para um arquivo PHP e salvar no banco MYSQL. Não sei como posso fazer isso, alguém pode me dar uma ideia de como fica o JQuery?
2 Respostas
Da forma natural não tem como enviar um arquivo via ajax. Você pode usar um objeto FormData para isso.
$.ajax({
url: 'send.php', //Destino
type: 'POST',
data: new FormData($('#form')[0]), //Seletor do formulário
processData: false //Com FormData Não precisa processar os dados
}).done(function() {
console.log("Sucesso!");
});
Depois você consegue extrair as informações do formulário com um $_POST no PHP.
Vou fazer um exemplo que como campos (para além de ficheiro, imagem) vai ter input para nome e outro para email:
Isto é um exmplo funcional, coloque estes dois ficheiros no mesmo diretório e teste:
index.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form class="formulario" enctype="multipart/form-data" method="post">
<input class="nome" type="text" name="nome" placeholder="Nome" />
<input class="email" type="text" name="email" placeholder="E-Mail" />
<input class="arquivo" type="file" name="arquivo" />
<input class="enviar" type="submit" value="Enviar Dados" />
</form>
<div class="resp"></div>
</div>
<script>
$('.formulario').submit(function() {
var form_data = new FormData();
form_data.append('arquivo', $('input.arquivo').prop('files')[0]);
form_data.append('nome', $('input.nome').val());
form_data.append('email', $('input.email').val());
$.ajax({
url: 'upload.php', // caminho para o script que vai processar os dados
type: 'POST',
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(response) {
$('.resp').html(response);
},
error: function(xhr, status, error) {
alert(xhr.responseText);
}
});
return false;
});
</script>
No lado servidor, upload.php:
<?php
echo 'Campos: ' .json_encode($_POST). '<br>'; // dados enviados pelo metodo POST, ficheiros não incluidos
echo 'Ficheiros: ' .json_encode($_FILES). '<br><br>'; // ficheiros enviados
$nome = htmlentities(trim($_POST['nome']));
$email = htmlentities(trim($_POST['email']));
$tamanho_max = 2097152; // 2 megabytes
$allowed_exts = array('jpg', 'jpeg', 'png', 'gif');
$erro = array();
if ($nome === '') {
$erro[] = "Digite seu nome";
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$erro[] = "Digite um e-mail válido";
}
if(!isset($_FILES['arquivo'])) {
$erro[] = 'O arquivo é obrigátorio';
}
else {
$arquivo = $_FILES['arquivo'];
if ($arquivo['size'] > $tamanho_max) {
$MB = $tamanho_max/1024/1024;
$erro[] = 'O limite do arquivo é de ' .$MB. ' megabytes';
}
$ext = explode('.', $arquivo['name']);
$ext = end($ext);
if (!in_array(strtolower($ext), $allowed_exts)) {
$erro[] = 'Os tipo do arquivo permitidos são: ' .implode(', ', $allowed_exts);
}
}
if (count($erro) < 1) {
$ext = explode('.', $arquivo['name']);
$ext = end($ext);
$filename = md5(time()). '.' .$ext; // destino e nome do ficheiro, neste caso será na mesma pasta onde está este código php
move_uploaded_file($arquivo['tmp_name'], $filename);
// aqui coloca o que quiser na base de dados
echo '<b>Dados enviados com sucesso</b><br>Nome: ' .$nome. '<br>Email: ' .$email. '<br>Imagem (' .$arquivo['name']. '): ' .__DIR__.'/'.$filename;
}
else {
$err_msg = '<ul><b>Erros:</b><br>';
foreach ($erro as $err) {
$err_msg .= '<li>' . $err . '</li>';
}
$err_msg .= '</ul>';
echo $err_msg; // mensagem returnada, isto vai ser o conteudo da resposta, (response do lado cliente)
}
-
e após o usuário selecionar como pode ser enviado esses dados selecionado para o mysql . Fica o meu caso tem como vê pt.stackoverflow.com/questions/181981/… Commented 3/02/2017 às 22:47
-
@allanaraujo , olá. Se tiver tempo amanhã dou uma olhadela, diz-me qualquer coisa se ainda não tiveres resolvido– MiguelCommented 3/02/2017 às 23:59
-