Ir para conteúdo
Fórum Script Brasil
  • 0

Preview de uma imagem Carregada para o UpLoad


STUDDIO

Pergunta

Ola pessoal tudo certo ... tenho um problema com um script que pode ajudar muita gente 

ele da um preview das imagens carregadas em um form de upload ele funciona mas só da o preview

de uma imagem quando carrega ... se eu colocar o formulário em multiple ele exibe todas as imagens selecionadas 

antes de fazer o upload para o banco de dados, mas se eu deixar a seleção normal ou seja

uma imagem por vez,  ele não carrega o restante das imagens, apenas a primeira, vou por o

código abaixo completo funcionando com o multiple se alguém ai conseguir me ajudar a mudar ele

para exibir cada imagem carregada separadamente eu agradeço e vai ajudar muita gente também 

 

<html>
<head>
<style type="text/css">
.thumb-image{
 float:left;width:100px;
 position:relative;
 padding:5px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;">
  <input id="fileUpload" multiple="multiple" type="file"/> 
<div id="image-holder"></div>
</div>

<script language="JavaScript">
$("#btnCLear").on('click',function(){
$("#image-holder").html("");
}); 

$("#fileUpload").on('change', function () {

     //Obtendo contagem dos arquivos selecionados
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop para cada arquivo selecionado para uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("Seu navegador não tem suporte ao FileReader.");
         }
     } else {
         alert("Selecione apenas arquivos de imagem.");
     }
 });
</script>
</body>
</html>

No meu caso preciso que funcione dessa maneira pois meu sistema carrega uma imagem por vez 

 

 

 

<html>
<head>
<style type="text/css">
.thumb-image { float: left; width: 100px; position: relative; padding: 5px; }
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<div id="wrapper" style="margin-top: 20px;">
 <input id="fileUpload" type="file"/>
 <div id="image-holder"></div>
</div>
<script language="JavaScript">
$("#btnCLear").on('click',function(){
$("#image-holder").html("");
}); 

$("#fileUpload").on('change', function () {

     //Obtendo contagem dos arquivos selecionados
     var countFiles = $(this)[0].files.length;

     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#image-holder");
     image_holder.empty();

     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {

             //loop para cada arquivo selecionado para uploaded.
             for (var i = 0; i < countFiles; i++) {

                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "thumb-image"
                     }).appendTo(image_holder);
                 }

                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }

         } else {
             alert("Seu navegador não tem suporte ao FileReader.");
         }
     } else {
         alert("Selecione apenas arquivos de imagem.");
     }
 });
</script>
</body>
</html>

 

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...