Upload with json + Modal + Javascript

Question

Upload with json + Modal + Javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good evening, I need a help, I'm uploading multiple files in a modal, but the php return does not occur as expected.

CallingMODAL:

$('button.btnaddimg').on('click',function(e){e.preventDefault();varid=document.getElementById('idclienteimg').value;$('#modalADDIMG').data('id',id).modal('show');});

SendingthefilestoPHP:

var$formUpload=document.getElementById('formularioimg'),$preview=document.getElementById('previewimg'),i=0;$formUpload.addEventListener('submit',function(event){event.preventDefault();varxhr=newXMLHttpRequest();varid=$('#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();

        }




?>

Error:

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

PHP return - console.log:

 <!--Main layout-->
        {"error":"Sem arquivo!"}

php javascript json

asked by anonymous 12.03.2018 / 02:52

2 answers

How do I proceed with applying an emergency hotfix? Pass values (radio) from one HTML to another

score 1 · Answer 1

I was able to resolve this way.

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;
            }
        });


    }));

score 0 · Answer 2

The problem is that the Ajax return is coming with information that does not interest JSON, so the error:

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

See that the Ajax return is returning, in addition to the expected JSON, several HTML codes shown in the question print:

<ul>....

Doing JSON.parse(xhr.responseText) will result in an error because these HTML tags are not part of the expected JSON.

When a request is made via Ajax expecting a JSON, nothing more than it should come in response. Any other characters that come other than JSON will cause an error. So delete the page that sends the Ajax return everything that is not part of echo json_encode($ret); , like those HTML codes that are returning together.

So you have 2 alternatives:

Or isolate the HTML code with if{} when there is an Ajax request or else create a .php file just for this (without HTML), which I think is most recommended. As said, the important (and what matters) is that the return is just JSON.