Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Carcleo

Enviar input fille multiple

Por , em Javascript

Recommended Posts

Carcleo    4

Carcleo
Postado

Pessoal, estou precisando de ajuda para resolver um problema.

 

Tenho um input file multiple personalizado que permite adicionar várias imagens, exibe a miniatura delas e dá opção de caso uma das imagens tenha sida escolhida erroneamente, pode-se clikar no X e ela sai da lista.

 

Porem, embora a imagem removida tenha saído da apresentação, ao submeter o formulário, a imagem cancelada vai junto com o input file.

 

Gostaria de remover esse problema e também, ao se remover uma imagem, o botão do input seja desabilitado.

 

 

Segue os codigos:

 

html

 

<!DOCTYPE html>
<html>
<head>
    <title>File API - FileReader as Data URL</title>
    <link rel="stylesheet" type="text/css" href="style.css">
   <script type="text/javascript" src="../../_global/_funcoes/_js/jquery-2.1.4.min.js"></script>
   <script type="text/javascript" src="_js/upload.js"></script>
</head>
<body>
    <header>
        <h1>File API - FileReader</h1>
    </header>
    <div id="multiple_upload">
         <form action="upload.php" enctype="multipart/form-data" method="post">
            <input type="file" multiple id="uploadChange"  name="uploadChange[]" />
            <div id="message">Selecionar fotos</div> <br /> <br />
            <button type="submit" id="botao">Enviar Fotos</button>
          </form>
          <div id="lista">
       </div>
    </div>
 
</body>
</html>

js

 

$(function(){
    $('#uploadChange').on('change',function() {
         var id = $(this).attr('id');
        var totalFiles = $(this).get(0).files.length;
        if(totalFiles == 0) {
          $('#message').text('Selecionar fotos' );
        }
        if ( totalFiles > 1) {
       $('#message').text( totalFiles+' arquivos selecionados' );
        } else {
       $('#message').text( totalFiles+' arquivo selecionado' );
        }
           var htm='<ol>';
         for (var i=0; i < totalFiles; i++) {
             var c = (i % 2 == 0) ? 'item_white' : 'item_grey';
             var arquivo = $(this).get(0).files[i];
             var fileV = new readFileView(arquivo, i);
             htm += '<li class="'+c+'"><div class="box-images"><img class="item" data-img="'+i+'" data-id="'+id+'" border="0"></div><span>'+arquivo.name+'</span><a href="javascript:removeFile('+i+',\''+id+'\')" class="remove">x</a></li>'+"\n";
         }
        htm += '</ol>';
           $('#lista').html(htm);
         
    });
  
});
 
function readFileView(file, i) {
 
    var reader = new FileReader();
     reader.onload = function (e) {
       $('[data-img="'+i+'"]').attr('src', e.target.result);
}
     reader.readAsDataURL(file);
}
 
function removeFile(item, id) {
    var el = $('img[data-img="'+item+'"]');
    var textoQtdArquivosAtuais = $('#message').text();
    var qtdArquivosSelecionados = parseInt(textoQtdArquivosAtuais.substring(0, parseInt(textoQtdArquivosAtuais.indexOf(' arquivo')))); 
    
  if (confirm('Tem certeza que deseja remover este item?')) {
   el.closest("li").remove();  
      qtdArquivosSelecionados = qtdArquivosSelecionados -1;
      //Alterando label com quantidade de arquivos selecionados..  
     
        if(qtdArquivosSelecionados == 0) {
          $('#message').text('Selecionar fotos' );
        } else {
        if (qtdArquivosSelecionados > 1) {
       $('#message').text( qtdArquivosSelecionados+' arquivos selecionados' );
        } else {
       $('#message').text( qtdArquivosSelecionados+' arquivo selecionado' );
        }
        }
  }
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito