studdiox
-
Total de itens
208 -
Registro em
-
Última visita
-
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 ele ficaria assim <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>
-
javascript Duvida ! < Foto anterior II Próxima Foto >
studdiox respondeu ao tópico de studdiox em Javascript
Consegui chegar até essa estrutura mas ainda não consegui fazer passar as fotos na imagem ampliada se alguém puder dar uma mão ai com conhecimento em java pois creio que seja por ali que algo está dando erro. -
Ola tudo bem estou com um pequeno problema com um código e como não entendo muito da área do js ... java gostaria de pedir ajuda aos colegas do grupo ele deveria abrir a imagem grande ao clicar em um thumb e também passar as imagens tanto para < esq quanto dir > <script> $(function(){ $('.thumbs a').click(function (e) { e.preventDefault(); var cover = $('.cover img'); var thumb = $(this).attr('href'); cover.fadeTo('200', '0', function () { cover.attr('src', thumb); cover.fadeTo('150', '1'); }); $('.thumbs img').removeClass('active'); $(this).addClass('active'); }); $('.details-photos-next').click(function (e) { var thumb = $('a[href="'+$('.cover img').attr('src')+'"').next(); if (thumb.length == 0) thumb = $('a[href="'+$('.cover img').attr('src')+'"').parent().find('a').first(); thumb.click(); }); $('.details-photos-prev').click(function (e) { var thumb = $('a[href="'+$('.cover img').attr('src')+'"').prev(); if (thumb.length == 0) thumb = $('a[href="'+$('.cover img').attr('src')+'"').parent().find('a').last(); thumb.click(); }); }); </script> na div thumb tenho o seguinte código <div class="thumbs"> <? if ($foto1 != "produtos/"){ ?> <a href="thumb.php?imagem=<? print $foto1;?>&x=640"> <?php print "<img src='thumb.php?imagem=$foto1&x=75' border='0'>"; ?> </a> <?php } ?> <? if ($foto2 != "produtos/"){ ?> <a href="thumb.php?imagem=<? print $foto2;?>&x=640"> <?php print "<img src='thumb.php?imagem=$foto2&x=75' border='0'>"; ?> </a> <?php } ?> <? if ($foto3 != "produtos/"){ ?> <a href="thumb.php?imagem=<? print $foto3;?>&x=640"> <?php print "<img src='thumb.php?imagem=$foto3&x=75' border='0'>"; ?> </a> <?php } ?> <? if ($foto4 != "produtos/"){ ?> <a href="thumb.php?imagem=<? print $foto4;?>&x=640"> <?php print "<img src='thumb.php?imagem=$foto4&x=75' border='0'>"; ?> </a> <?php } ?> </div> Na janela grande onde teria que abrir a imagem ampliada esse seria o código <td width="670" height="480" align="center"> <div class="details-photos-box"> <div class="details-photos-prev"> <span> ‹ </span> </div> <img src="thumb.php?imagem=<? print $foto1;?>&x=640'" border="0"/> <div class="details-photos-next"> <span> › </span> </div> </div> </td>