remover javascript Envio de imagens por favor so preciso de um peueno detalhe sobre " delete arr[0] " com o JAVASCRIPT

[renatto 0]

 

 

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>

 

 

 

 

 

 

 

 

 

 

[quintelab 91]

@renatto depois que editou seu post ficou dificil de entender o problema.

[renatto 0]

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>

 

 

 

 

[renatto 0]

Em 21/04/2017 at 07:32, quintelab disse:

@renatto depois que editou seu post ficou dificil de entender o problema.

Editado maninho valeu pela atenção