0

Boa noite, preciso de uma ajuda, estou fazendo um upload de arquivos multiplos em uma modal, mas o retorno do php não ocorre como esperado. inserir a descrição da imagem aqui

Chamando a MODAL:

$('button.btnaddimg').on('click', function (e) {

        e.preventDefault();
        var id = document.getElementById('idclienteimg').value; 

            $('#modalADDIMG').data('id', id).modal('show');

    });

Enviando os arquivo para o PHP:

var $formUpload = document.getElementById('formularioimg'),
    $preview = document.getElementById('previewimg'),
    i = 0;

    $formUpload.addEventListener('submit', function(event){
      event.preventDefault();
      var xhr = new XMLHttpRequest();
      var id = $('#modalADDIMG').data('id');

      xhr.open("POST", $formUpload.getAttribute('action'));

      var formData = new FormData($formUpload);
      formData.append("i", i++);
      formData.append("id", id);
      xhr.send(formData);

      xhr.addEventListener('readystatechange', function() {


        if (xhr.readyState == 4){

            if(xhr.status == 200) {


                    var data = JSON.parse(xhr.responseText);

                    console.log(data);                  

                  /*if (!data.error && data.status == 'ok') {
                    //$preview.innerHTML += '<br />Enviado!!';
                    toastr["error"]('Enviado!');
                  } else {
                    //$preview.innerHTML = 'Arquivo não enviado';
                    toastr["error"]('Arquivo não enviado');
                  }*/


            } else {

              toastr["error"](xhr.statusText);
            }
        }



      });

HTML Modal form:

<!--Modal: modalADDIMG-->
        <div class="modal fade right" id="modalADDIMG" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
        <div class="modal-dialog modal-side modal-bottom-right modal-notify modal-danger" role="document">

            <!--Content-->
            <div class="modal-content">
                <!--Header-->
                    <div class="modal-header red">
                        <p class="heading lead">Adicionar arquivo img/png/jpeg/bmp</p>

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true" class="white-text">&times;</span>
                                                </button>
                    </div>  


                <!--Body-->
                <div class="modal-body mb-0 p-0">


                    <div class="card-body">

                        <form id="formularioimg" method="post" enctype="multipart/form-data" action="?pg=upaddimg">

                            <input type="hidden" name="acaoimg" value="IMG">
                            <input type="hidden" name="idclienteimg" value="<?php echo $id?>">
                            <div class="file-field">                    

                                <div class="d-flex justify-content-center">
                                    <div class="btn btn-danger btn-rounded btn-sm">
                                        <span id="spa">Escolha o arquivo</span>                                         
                                        <input type="file" id="inputArquivo" accept="image/png, image/jpeg" name="img[]" multiple>

                                    </div>

                                </div>
                                <center><input class="btn btn-danger btn-rounded btn-sm" id="btnenviaimgcli" type="submit" value="Enviar" /></center>
                            </div>
                            <div id="previewimg"></div>

                        </form>


                    </div>


                </div>

                <!--Footer-->
                <div class="modal-footer justify-content-center">                               
                    <button type="button" class="btn btn-outline-danger btn-rounded btn-md ml-4" data-dismiss="modal">Fechar</button>
                </div>

            </div>
            <!--/.Content-->

        </div>
        </div>
        <!--Modal: modalADDIMG-->

PHP:

<?php
include("../includes/config.php");

    if($_POST){

        $acao       = $_POST['acao'];
        $id         = $_POST['id'];
        $file       = $_FILES['img'];

        $numFile    = count(array_filter($file['name']));

        //var_dump($numFile);
        $folder     = 'arquivos/anexos';


        //REQUISITOS
        $permite    = array('image/jpeg', 'image/png', 'image/bmp');
        //$permite  = array('application/pdf');
        $maxSize    = 1024 * 1024 * 5;
        $errorMsg   = array(
                1 => 'O arquivo no upload é maior do que o limite definido em upload_max_filesize no php.ini.',
                2 => 'O arquivo ultrapassa o limite de tamanho em MAX_FILE_SIZE que foi especificado no formulário HTML',
                3 => 'o upload do arquivo foi feito parcialmente',
                4 => 'Não foi feito o upload do arquivo'
            );


        if($numFile <= 0){
             $ret = array('error' => 'Sem arquivo!');
             //$ret = array('error' => 0);
        } else {

            for($i = 0; $i < $numFile; $i++){

                    $name   = $file['name'][$i];
                    $type   = $file['type'][$i];
                    $size   = $file['size'][$i];
                    $error  = $file['error'][$i];
                    $tmp    = $file['tmp_name'][$i];

                    $extensao = @end(explode('.', $name));
                    $novoNome = rand().".$extensao";

                    if($error){
                         $ret = array('error' => $errorMsg[$error]);
                         //$ret = array('error' => 1);
                    } else {

                        file_put_contents('arquivos/post.txt', 'name=' . $novoNome . ',count=' . $numFile . PHP_EOL, FILE_APPEND);

                        if(move_uploaded_file($tmp, $folder.'/'.$novoNome))
                        {

                            $data = date("y-m-d");
                            $ext = $type;


                            $sql = "insert into fotos (nomefoto, data, arquivo, tipoarq, path, id_cliente) VALUES (:nomefoto, :data, :arquivo, :tipoarq, :path, :id_cliente)";
                            $rs = $con->prepare($sql);
                            $rs->bindParam(':nomefoto',$name);
                            $rs->bindParam(':data',$data);
                            $rs->bindParam(':arquivo',$novoNome);
                            $rs->bindParam(':tipoarq',$ext);
                            $rs->bindParam(':path',$folder);
                            $rs->bindParam(':id_cliente',$id);
                            $result = $rs->execute();       
                            if ( ! $result ) {

                                     $ret = array('error' => $result);
                                    //$ret = array('error' => 2);
                            }

                             $ret = array('status' => 'Arquivo insirido com sucesso');
                             //$ret = array('status' => 3);

                        } else {
                            $ret = array('error' => 'Erro interno do sistema, tente mais tarde!');
                            //$ret = array('error' => 4);
                        }

                    }
                }
            }


        //header('Content-Type: application/json');
        echo json_encode($ret);
        die();

        }




?>

Erro:

VM16004:3 Uncaught SyntaxError: Unexpected token < in JSON at position 4
    at JSON.parse (<anonymous>)
    at XMLHttpRequest.<anonymous> (.....min.js:771)

Retorno do PHP - console.log:

 <!--Main layout-->
        {"error":"Sem arquivo!"}
3
  • O que seria esse "main layout" do retorno do PHP?
    – Woss
    Commented 12/03/2018 às 2:20
  • e da pagina html da tag <main>..essa é a ultima linha da pagina Commented 12/03/2018 às 2:28
  • o retorno do php é ; {"error":"Sem arquivo!"} Commented 12/03/2018 às 2:29

2 Respostas 2

1

Consegui resolver desta forma.

PHP:

<?php
include("../includes/config.php");

    if($_POST){

        //variaveis
        $id         = $_POST['idclienteimg'];
        $acao       = $_POST['acao'];
        $file       = $_FILES['fileI'];
        $numFile    = count(array_filter($file['name']));
        $folder     = '../arquivos/anexos';
        $folderB    = 'arquivos/anexos';

        //REQUISITOS
        $permite    = array('image/jpeg', 'image/png', 'image/bmp');

        //validações
        $maxSize    = 1024 * 1024 * 5;
        $errorMsg   = array(
                1 => 'O arquivo no upload é maior do que o limite definido em upload_max_filesize no php.ini.',
                2 => 'O arquivo ultrapassa o limite de tamanho em MAX_FILE_SIZE que foi especificado no formulário HTML',
                3 => 'o upload do arquivo foi feito parcialmente',
                4 => 'Não foi feito o upload do arquivo'
            );


        if($numFile <= 0){
             echo "Return Code: " . 'Nenhum arquivo foi selecionado' . "<br/>";
        } else {

            for($i = 0; $i < $numFile; $i++){

                    $name   = $file['name'][$i];
                    $type   = $file['type'][$i];
                    $size   = $file['size'][$i];
                    $error  = $file['error'][$i];
                    $tmp    = $file['tmp_name'][$i];

                    $extensao = @end(explode('.', $name));
                    $novoNome = rand().".$extensao";

                    if($error){
                            echo "Return Code: " . $errorMsg[$error] . "<br/>";
                        }   else if(!in_array($type, $permite)){                    
                            echo 'Erro: arquivo não suportado(somente arquivos de imagens)!';   
                        }   else if($size > $maxSize) {                 
                            echo 'Erro arquivo ultrapassa o limite de 5MB';                      
                    } else {

                        //grava um log de arquivos inseridos
                        file_put_contents('../arquivos/post.txt', 'name=' . $novoNome . ',count=' . $numFile . PHP_EOL, FILE_APPEND);

                        if(move_uploaded_file($tmp, $folder.'/'.$novoNome))
                        {

                            $data = date("y-m-d");
                            $ext = $type;

                            $sql = "insert into fotos (nomefoto, data, arquivo, tipoarq, path, id_cliente) VALUES (:nomefoto, :data, :arquivo, :tipoarq, :path, :id_cliente)";
                            $rs = $con->prepare($sql);
                            $rs->bindParam(':nomefoto',$name);
                            $rs->bindParam(':data',$data);
                            $rs->bindParam(':arquivo',$novoNome);
                            $rs->bindParam(':tipoarq',$ext);
                            $rs->bindParam(':path',$folderB);
                            $rs->bindParam(':id_cliente',$id);
                            $result = $rs->execute();       
                            if ( ! $result ) {
                                    echo 'Erro:' . $result;
                                    exit;
                                }
                                echo 'Upload Realizado com Sucesso!';   

                        } else {
                            echo 'Erro interno do sistema, tente mais tarde!';

                        }
                    }
                }
            }
        }
?>

AJAX:

$("#uploadimage").on('submit',(function(e) {
        e.preventDefault();
        $("#message").empty();
        $('#loading').show();

        $.ajax({
            url: 'estrutura/upaddimg.php',
            type: 'POST',
            data: new FormData(this),
            processData: false,         
            contentType: false,         
            success: function(data) {              
                console.log(data);
                $('#loading').show();
                $("#message").html(data);
                var tt = data;
            }
        });


    }));
0

O problema é que o retorno do Ajax está vindo com informações que não interessam ao JSON, por isso o erro:

Uncaught SyntaxError: Unexpected token < in JSON at position...

Veja que o retorno do Ajax está retornando, além do JSON esperado, vários códigos HTML mostrado no print da pergunta:

<ul>....

Ao fazer o JSON.parse(xhr.responseText) irá resultar em erro porque esses códigos HTML não fazem parte do JSON esperado.

Quando se faz uma requisição via Ajax esperando um JSON, nada além dele deve vir como resposta. Qualquer outro caractere que vier que não seja o JSON irá causar erro. Portanto, apague da página que envia o retorno do Ajax tudo que não faça parte do echo json_encode($ret);, como esses códigos HTML que estão retornando junto.

Aí você pode dizer: "Não posso apagar o HTML porque faz parte da página".

Então você tem 2 alternativas:

Ou isola o código HTML com if{} quando houver alguma requisição do Ajax ou então cria um arquivo .php apenas para isso (sem HTML), que eu acho o mais recomendado. Como dito, o importante (e o que importa) é que o retorno seja apenas o JSON.

0

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 .