0

Estou tentando fazer um upload de imagens com AJAX e PHP, porém não obtenho exito e não encontro o erro.

O meu código é:

$('.arquivo').change(function() {
  var fileName = $(this)[0].files[0].name;
  var formData = new FormData($('.photo_change'));
  $('#modal_photo_content form img').show();
  $.ajax({
    url: 'http://localhost/photo_change.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(data) {
      alert(data);
    },
    error: function() {
      alert("ERRO: Tente novamente mais tarde.");
    }
  });
});
<form action="" method="post" enctype="multipart/form-data">
  <input class="arquivo" name="img" type="file" />
  <input type="submit" class="img_envia" name="envia_img" value="SELECIONAR IMAGEM" />
</form>

E o PHP

<?php
session_start();
if(isset($_FILES['img'])){
    require('connection.php');
    $id = $_SESSION['login_id'];
    $extensoes = array('png','jpg','jpeg');
    $busca_dados_user = mysqli_query($conexao,"SELECT * FROM users WHERE id = '$id'");
    if(mysqli_num_rows($busca_dados_user) == 1){

    }


}else{
    echo "Erro [003]: Faltam dados para a requisição.";
}
?>

Mas sempre retorna: Erro [003]: Faltam dados para a requisição.

Tem algo faltando ou errado?

5
  • Há um tempo atrás, eu tava como esse mesmo problema. Eu troquei o isset por !empty e coloquei uma função no Ajax e funcionou. Vou colocar o código para ver se te ajuda.
    – Luiz
    Commented 24/06/2018 às 23:19
  • Você tem que passar um objeto form DOM nativo e um seletor jQuery retorna sempre um array. Tente isso: var formData = new FormData($('.photo_change')[0]); Commented 26/06/2018 às 0:56
  • Resposta editada!!
    – user60252
    Commented 26/06/2018 às 13:38
  • Que dejá vu! Vi essa pergunta ai e não encontrava a minha resposta, mas afinal é uma pergunta diferente! pt.stackoverflow.com/questions/309755/upload-ajax-e-php/309765
    – Leite
    Commented 26/06/2018 às 17:09
  • Então já tinha sido feita! E eu perdendo tempo respondendo essa daqui. Vi que lá tem algumas diferenças no código mas o problema é o mesmo daqui.
    – user60252
    Commented 26/06/2018 às 23:01

2 Respostas 2

2

O arquivo não está sendo enviado.

Coloque a classe no formulário class="photo_change" e use o objeto FormData da seguinte forma data: new FormData($('.photo_change')[0]),

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form class="photo_change" method="POST" enctype="multipart/form-data">
    <input class="arquivo"  name="img" type="file" />
</form>

<div id="result"></div>

<script language="javascript">
$('.arquivo').change(function() {

    $.ajax({
        url: "http://localhost/photo_change.php",
        type: "POST",
        data: new FormData($('.photo_change')[0]),
        mimeType: "multipart/form-data",
        contentType: false,
        processData:false,
        success: function (data) {
            $("#result").html(data);
        }
    });
});
</script>

photo_change.php

<?php
session_start();
if(is_array($_FILES)){
    require('connection.php');
    $infos = $_FILES['img'];
    $id = $_SESSION['login_id'];
    $extensoes = array('png','jpg','jpeg');
    $busca_dados_user = mysqli_query($conexao,"SELECT * FROM users WHERE id = '$id'");
    if(mysqli_num_rows($busca_dados_user) == 1){
        var_dump($infos);
    }


}else{
    echo "Erro [003]: Faltam dados para a requisição.";
}

?>

Também pode usar

data: new FormData(document.getElementById("form1")),

e no form com id

<form id="form1" method="POST" enctype="multipart/form-data">

3
  • Eu dou um var_dump no $_FILES e o ajax me retorna um array vazio. Não estou entendendo. Acho que o arquivo nao está sendo enviado Commented 25/06/2018 às 22:32
  • Pode me explicar porque $('.photo_change')[0] e não $('.photo_change') ? Commented 26/06/2018 às 20:15
  • 1
    Posso, como a referencia é a classe, e podem existir vários forms com a mesma classe, o indice 0 se refere ao primeiro form. Se esse form fosse o segundo da sua página vc deveria se referir a ele como indice 1, ou seja .photo_change')[1]. Já com id é diferente pois ele é único para cada elemento, bastando fazer FormData(document.getElementById(idDoForm")
    – user60252
    Commented 26/06/2018 às 22:51
1

Ajax

                  $('.arquivo').change(function() {
                  var fileName = $(this)[0].files[0].name;
                  var formData = new FormData($('.photo_change'));
                  $('#modal_photo_content form img').show();
                      $.ajax({
                        url:'http://localhost/photo_change.php',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(data){
                            alert(data);
                        },

                        xhr: function() {  // Custom XMLHttpRequest
                        var myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { // Avalia se tem suporte a propriedade upload
                        myXhr.upload.addEventListener('progress', function () {
                        /* faz alguma coisa durante o progresso do upload */
                        }, false);
                      }
                        return myXhr;
                     },

                        error: function() {
                            alert("ERRO: Tente novamente mais tarde.");
                        }
                      });
});

PHP

No lugar de:

if(isset($_FILES['img'])){

Eu mudei para:

if (!empty($_FILES['img']['name'])) {

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 .