0

gostaria de saber como posso apresentar as imagens que foram selecionadas no meu input multiple. Eu já tentei achar algo do tipo mas só encontrei como pegar o nome, tamanho, tipo. Ob

2 Respostas 2

3

Tomando como base a resposta do amigo Mathias, fiz um exemplo que se encaixa melhor na sua pergunta pois você tem um input multiple e não apenas um arquivo por vez como como na resposta. Bastou adicionar um loop que percorre todos os arquivos selecionados e as imagens através de Append na form: https://jsfiddle.net/y5j694vz/

Html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="inputImg" multiple/><br>

</form>

JS:

    $("#inputImg").change(function() {
      readURL(this);
    });

    function readURL(input) {
      if (input.files && input.files[0]) {
         for(x in input.files){
        var reader = new FileReader();
                reader.readAsDataURL(input.files[x]);
        reader.onload = function(e) {
          $('<img style="max-width:50px">').appendTo("form").attr('src',        e.target.result);
        }

      }
   }
}
2

Acredito que o código abaixo seja o que você procura, sempre que houver alguma mudança no input é chamada uma função que lê e exibe o arquivo armazenado se possível.

$("#inputImg").change(function() {
  readURL(this);
});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="inputImg" /><br>
  <img id="img" style="border:1px solid grey;" />
</form>

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 .