2

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 2

4

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.

3

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)
}
3
  • 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
    – Miguel
    Commented 3/02/2017 às 23:59
  • não conseguir não , fico no aguardo . Commented 5/02/2017 às 21:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .