0

Boa noite galera estou tendo um problema para chamar uma classe eu quero que quando o botão de file estiver com algum arquivo aparece um icon (so para indicar que o botão não esta vazio).

Essa função só funciona no primeiro botão, pois eu tenho um outro botao para adicionar mais campos que chama esse botao de file novamente.

<html>

<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<br>

<br><button onclick="myFunction2()"> mais campos </button>      
<script>
function myFunction(){
    var x = document.getElementById("myFile");
    var txt = "<img src='ok.png'>"
   
    if ('files' in x) {
        if (x.files.length == 0) {
            txt = "Selecione um arquivo.";
        } else {
            for (var i = 0; i < x.files.length; i++) {
                txt += "<br><strong>" + (i+1) + ". file</strong><br>";
                var file = x.files[i];
                if ('name' in file) {
                    txt += "name: " + file.name + "<br>";
                }
                if ('size' in file) {
                    txt += "size: " + file.size + " bytes <br>";
                }
            }
        }
    }
    

    document.getElementById("demo").innerHTML = txt;
}

function myFunction2() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "file");
    document.body.appendChild(x);
    
}

</script>

</body>
</html>

1 Resposta 1

0

Você não pode utilizar o id dos elementos input e p porque por boas práticas você deve ter um id único por elemento, logo você não conseguiria pegar os elementos novos criados usando o getElementById. Entretanto você pode passar o próprio elemento na chamada da função, aí fica mais fácil se referenciar a ele.

Na criação do novo elemento file você também não criou a nova tag p que irá guardar a imagem e as informações sobre o mesmo.

Fiz algumas alterações que creio que sejam o seu objetivo:

// Encontra o próximo elemento
function nextElementSibling(element) {
    do {
        element = element.nextSibling;
    } while (element && element.nodeType !== 1);
    return element;
}

function myFunction(el) {
  var txt = "<img src='ok.png'>"

  if ('files' in el) {
    if (el.files.length == 0) {
      txt = "Selecione um arquivo.";
    } else {
      for (var i = 0; i < el.files.length; i++) {
        txt += "<br><strong>" + (i + 1) + ". file</strong><br>";
        var file = el.files[i];
        if ('name' in file) {
          txt += "name: " + file.name + "<br>";
        }
        if ('size' in file) {
          txt += "size: " + file.size + " bytes <br>";
        }
      }
    }
  }
  nextElementSibling(el).innerHTML = txt;
}

function addField() {
	var container =  document.getElementById("fileFields");
  var element = document.createElement("INPUT");
  element.setAttribute("type", "file");
  element.setAttribute("onchange", "myFunction(this)");
  container.appendChild(element);
  
  element = document.createElement("p");
  container.appendChild(element);
}
<fieldset id="fileFields">
<legend>Arquivos</legend>
  <input type="file" multiple="true" size="50" onchange="myFunction(this)">
  <p></p>
</fieldset>
<button onclick="addField()">mais campos</button>

A função nextElementSibling eu peguei deste post aqui: https://stackoverflow.com/questions/14197675/native-javascript-alternative-for-jquerys-next Serve para localizar o próximo elemento após o informado no parâmetro.

1
  • Obrigado Marco era isso mesmo que queria fazer funcionou certinho Commented 13/10/2016 às 11:55

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 .