New question

Question:

Date: 01-02-2019 07:01:36 (In Spanish)

tengo problemas con este código ayuda por favor [Resolved]

estoy tratando de en una fila agrupar varias imagenes desde un solo input type file es decir con un solo input type file agrupar un maximo de 10 imagenes en un div, aqui un poco de código para ilustrar un poco mejor:
<html>
<label>Añadir imagen
<input class="Entrada" type="file" id="img" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"name="imagen2">
</label>
<div class="panel">
<img class="Salida" src="" alt="">
</div>
</html>
<script>
function mostrarImagen(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.Salida').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".Entrada").change(function(){
mostrarImagen(this);
});
</script>
Tags: AJAX - HTML - Javascript - JQuery - PHP Votes: 0 - Answers: 4 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 04-02-2019 09:06:07 y el problema es??   Votes: 0 - Link answer
     
  • Date: 05-02-2019 04:12:53 el problema es que solo toma una imagen, la idea es que en el div con clase "panel" a medida que use el input type file toda las imagenes que decida subir se vayan agrupando   Votes: 0 - Link answer
     
  • Date: 05-02-2019 04:42:08 Si lo que quieres es que se previsualicen todas las imagenes seleccionadas en el input, prueba así:

    <input type="file" multiple id="gallery-photo-add">
    <div class="gallery"></div>
    


    $(function() {
        // Multiple images preview in browser
        var imagesPreview = function(input, placeToInsertImagePreview) {
    
            if (input.files) {
                var filesAmount = input.files.length;
    
                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();
    
                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                    }
    
                    reader.readAsDataURL(input.files[i]);
                }
            }
    
        };
    
        $('#gallery-photo-add').on('change', function() {
            imagesPreview(this, 'div.gallery');
        });
    });
    


    Fuente

    Ya con eso se previsualizan todas las imagenes que selecciones en el imput
      Votes: 0 - Link answer
     
  • Date: 06-02-2019 05:28:03 muchisimas gracias era justo lo que necesitaba!!   Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In
 
frjcbbae garagebible.com