Sending an image and other data via Jquery to PHP

Question

I have a question I haven’t found a solution to. Need to send via Ajax an image and other fields to a PHP file and save in MYSQL database. I don’t know how I can do that, someone can give me an idea of what Jquery looks like?

Answer 1

Naturally you cannot send a file via ajax. You can use a Formdata object for this.

$.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!");
});

Then you can extract the form information with a $_POST in PHP.

Answer 2

I will do an example that as fields (in addition to file, image) will have input to name and other to email:

This is a working example, put these two files in the same directory and test:

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>

On the server side, 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)
}