New question

Question:

 
  0  
 
 
Horacio Q Karma: 124 Costa Rica
 
 Date: 03-03-2021 08:02:25 (In Spanish)

Vista previa de imagenes[Unresolved]

Saludos, genero campos de forma dinámica, primero tengo esta estructura: <div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="canti[]" class="form-control" placeholder="Cantidad"/>
<input type="file" name="archivo[]" class="form-control">
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Agregar</a>
</div>
</div>
<img src="" width="200" height="200" style="display: none;" class="segunda">
Luego al dar clic en agregar se adiciona este fragmento:
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="canti[]" class="form-control" placeholder="Cantidad"/>
<input type="file" name="archivo[]" class="form-control" id="files" multiple onchange="previewMultiple(event)">
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-danger remove"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remover</a>
</div>

</div>
<img src="" width="200" height="200" style="display: none;" class="segunda">

</div>

lo cual se ejecuta con esta función:
<script type="text/javascript">
$(document).ready(function(){
//group add limit
var maxGroup = 10;

//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});

//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script> Lo que necesito es que se muestre una vista previa de cada imagen agregada, el código que tengo ahorita solo lo agrega a la primera imagen: <script>
function readImage (input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result); // Renderizamos la imagen
}
reader.readAsDataURL(input.files[0]);
$("#blah").css("display","block");
}
}

$("#foto").change(function () {
// Código a ejecutar cuando se detecta un cambio de archivO
readImage(this);
});
</script>.Gracias. Tags: HTML - Javascript - JQuery Votes: 0 - Answers: 1 - Views: 7 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  •  
      0  
     
     
    Fernando Jimenez Karma: 599 Mexico
     
    Date: 03-04-2021 07:42:39 Sin que te lies mucho has lo siguiente como el ejemplo de psudocodigo :

    En el form de seleccion de imagen, al seleccionar la imagen
    convertir a base 64 la imagen mediante javascript
    presentar en base64 la imagen en donde quieres el previo

    Si es requerido en mas de una imagen realizar una funcion para que sea dinamico.

    la funcion que te ayudara a esto es encode base64 de javascript

    Saludos terricola.

    Stryfe™       Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com