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
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);
}
}
}
}
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>