Ir para conteúdo

renatto

Members
  • Total de itens

    3
  • Registro em

  • Última visita

Posts postados por renatto


  1. Em 20/04/2017 at 14:44, renatto disse:

    Criei esse codigo doido com javascript mais estou com uma super dificuldade !

    Esse codigo é uma galeria de imagens no FORMULARIO HTML ele envia e exibe as imagens em miniaturas

    só que coloquei um X para quando for CLICKADO a imagem será removida ate ai beleza,

    as imagens são removida de acordo com a escolha , mais tem um problema EX:

     

    IMAGEM_01.JPEG -------- X CLICKOU NO X A IMAGEM É REMOVIDA

    IMAGEM_02.JPEG -------- X

    IMAGEM_03.JPEG -------- X

    IMAGEM_04.JPEG -------- X

     

    Se eu remover a IMAGEM_02.JPEG, no X remove tudo direitinho so que quando clicko em ENVIAR  a imagem 02 mesmo assim vai pro BANCO DE DADOS

     

    tentei usar a arry  DELETE ARR[0]; deu certo mais nao sei criar um botão dinamicamente fiz de um jeito mais nao da certo

     

    será que alguem pode me ajudar agradeço de coração.

     

     

    JAVASCRIPT

     

    <script type="text/jscript">

    var arr = [];
    var x = 0;

     

     

    function pegaArquivos(files){
        formdata = false;


      if (window.FormData) {
        formdata = new FormData();
        document.getElementById('btn').style.display = 'none';
      }

     

    var li = document.createElement('li');
    var list = document.getElementById('img-list');

     

    var i = 0, len = files.length, formdata;
    // CONTA AS IMAGENS ::
    for(; i < len; i++){

    var file = files;    
       
    var img = document.createElement("img");       
        img.file = file;
        img.width = 75;
        img.height = 75;

     

     

    //-------------------------------------------------------------------------------------------------
    //-------------------------------------------------------------------------------------------------
    //-------------------------------------------------------------------------------------------------
    //-------------------------------------------------------------------------------------------------

    arr[x] = file;


    // LINKS X QUE REMOVE AS IMAGENS ::
     var a = document.createElement('a');                      
    a.innerHTML = '<div data-img="' + x + '" class=" '+ delete arr[x] +' ">'+x+'<a href="javascript:removeFile('+x+')" " class="remove"> x </a></div>' + "\n";    

     


    formdata.append('images[]', arr[x]);

        li.appendChild(img);
        li.appendChild(a);
      list.appendChild(li);

            // MOSTRA AS IMAGENS EM MINIATURAS ::
            var reader = new FileReader();
            reader.onload = (function(aImg) {return function(e) {aImg.src = e.target.result;};})(img);
            reader.readAsDataURL(file);
                    
    }
    x++;


        if (formdata) {
         $("#gol").click(function() {

              $.ajax({
              url: "upload.php",
              type: "POST",
              data: formdata,
              processData: false,
              contentType: false,
              success: function(res) {
                document.getElementById('response').innerHTML = res;
                }
             });
         });
      }      
    }

     

    function removeFile(x) {

    var el = $('[data-img="' + x + '"]');

        // CACA A NUMERACAO DA LISTA ::
        el.closest("li").remove();
        // PERCORRE A LISTA E REMOVE A NUMERACAO CLICKADA ::
    }

    </script>

     

     

    FORMULARIO HTML

     

     

    <form action="upload.php" enctype="multipart/form-data" method="post">
    <input type="file" name="images" id="inputImage" onChange="pegaArquivos(this.files)"/>
    <button type="submit" id="btn">Salvar</button>
    </form>
    <button id="gol">click</button>

     

    <div id="imgLocal"></div>
    <ul id="img-list"></ul>

     

     

     

     


  2.  

     

    Tá aqui pessoal eu montei esse codigo doidinho rsrsr, mais ta tudo de boa ele functiona da seguinte forma :

     

    1- o usuário escolhe uma imagem no formulario html, o formulario envia e o javascript exibe a miniaturas até ai ok.

     

    eu coloquei um " X " PARA quando o ususario decidir remover a imagem antes de enviar ele clicka no X e a imagem remove até ai tambem ta funcionando

     

    a questão é a seguinte !

     

    quando o usuario clicka no X a imagem remove mais mesmo assim a imagem removida pelo javascript vai pro banco de dados a unica solução que achei foi com este comando

    ----> delete arr[2]; mais os usuario nao vão entrar no meu codigo procurar uma array e selecionar o numero da imagem para remover então eu queria colocar essa função neste comando

     

    ++++++++     <div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n";   ++++++++

     

    para uando apertar o X a imagem ser removida !

     

     

    Muito gráto pelo atenção de todos, e de quem me da essa força boa tarde.

     

     

     

    <script type="text/jscript">

    var arr = [];
    var x = 0;

     

     

    function pegaArquivos(files){
        formdata = false;

      if (window.FormData) {
        formdata = new FormData();
        document.getElementById('btn').style.display = 'none';
      }

     

    var li = document.createElement('li');
    var list = document.getElementById('img-list');

     

    var i = 0, len = files.length, formdata;
    for(; i < len; i++){

    var file = files;    
       
    var img = document.createElement("img");       
        img.file = file;
        img.width = 75;
        img.height = 75;

     

     

     


    arr[x] = file;


    formdata.append('images[]', arr[x]);

     var a = document.createElement('a');
         a.innerHTML = '<div data-img="' + x + '">'+x+'<a href="javascript:removeFile('+x+')"> x </a></div>' + "\n";    
         

     


       
        li.appendChild(img);
        li.appendChild(a);
      list.appendChild(li);

     

     

            var reader = new FileReader();
            reader.onload = (function(aImg) {return function(e) {aImg.src = e.target.result;};})(img);
            reader.readAsDataURL(file);
                    
    }
    x++;

     

     

        if (formdata) {
         $("#gol").click(function() {

              $.ajax({
              url: "upload.php",
              type: "POST",
              data: formdata,
              processData: false,
              contentType: false,
              success: function(res) {
                document.getElementById('response').innerHTML = res;
                }
             });
         });
      }      

     

    }


    function removeFile(x) {


    //delete arr[x];
    var el = $('[data-img="' + x + '"]');

        // CACA A NUMERACAO DA LISTA ::
        el.closest("li").remove();
        // PERCORRE A LISTA E REMOVE A NUMERACAO CLICKADA ::
    }

    </script>

     

     

    FORMULARIO HTML

     

    <form action="upload.php" enctype="multipart/form-data" method="post">
    <input type="file" name="images" id="inputImage" onChange="pegaArquivos(this.files)"/>
    <button type="submit" id="btn">Salvar</button>
    </form>
    <button id="gol">click</button>

     

     

     

     

     

     

     

     

     

     

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.