Question:
Date: 01-02-2019 07:01:36
(In Spanish)
<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> Votes: 0 - Answers: 4 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
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> Votes: 0 - Answers: 4 - Views: 13 Share on: Google Facebook Twitter LinkedIn Link
Answers:
-
-
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 -
To actively participate in the community first must authenticate, enter the system.Sign In