Hola a todos, necesito su ayuda,
tengo un código (copiado), que selecciona todas las imágenes que queramos y la muestra y después las sube...
Lo que necesito hacer es limitar la cantidad de fotos , a 2 ó 3 y que solo me muestre 2 o 3 ,,, o el numero de imágenes que yo necesite subir...
Dejo código , si necesitan todo el código me avisan y lo subo..
(function(){
var button=document.getElementById('btnSubmit')
var input = document.getElementById('images'),
formdata = false;
function mostrarImagenSubida(source){
var list = document.getElementById('lista-imagenes'),
li = document.createElement('li'),
img = document.createElement('img');
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
//Revisamos si el navegador soporta el objeto FormData
if(window.FormData){
formdata = new FormData();
// document.getElementById('btnSubmit').style.display = 'none';
}
if(input.addEventListener){
input.addEventListener('change', function(evt){
var i = 0, len = input.files.length, img, reader, file;
//Si hay varias imágenes, las obtenemos una a una
for( ; i < len; i++){
file = input.files[i];
// console.log(file);
//Una pequeña validación para subir imágenes
if(!!file.type.match(/image.*/)){
//Si el navegador soporta el objeto FileReader
if(window.FileReader){
reader = new FileReader();
//Llamamos a este evento cuando la lectura del archivo es completa
//Después agregamos la imagen en una lista
reader.onloadend = function(e){
mostrarImagenSubida(e.target.result);
};
//Comienza a leer el archivo
//Cuando termina el evento onloadend es llamado
reader.readAsDataURL(file);
}
}
}
}, false);
}
//Aplicamos la subida de imágenes al evento change del input file
if(button.addEventListener){
button.addEventListener('click', function(evt){
var i = 0, len = input.files.length, img, reader, file;
document.getElementById('response').innerHTML = 'Subiendo...';
//Si hay varias imágenes, las obtenemos una a una
for( ; i < len; i++){
file = input.files[i];
// console.log(file);
//Una pequeña validación para subir imágenes
if(!!file.type.match(/image.*/)){
//Si el navegador soporta el objeto FileReader
// if(window.FileReader){
// reader = new FileReader();
// //Llamamos a este evento cuando la lectura del archivo es completa
// //Después agregamos la imagen en una lista
// reader.onloadend = function(e){
// mostrarImagenSubida(e.target.result);
// };
// //Comienza a leer el archivo
// //Cuando termina el evento onloadend es llamado
// reader.readAsDataURL(file);
// }
// Si existe una instancia de FormData
if(formdata)
//Usamos el método append, cuyos parámetros son:
//name : El nombre del campo
//value: El valor del campo (puede ser de tipo Blob, File e incluso string)
formdata.append('images[]', file);
}
}
//Por último hacemos uso del método proporcionado por jQuery para hacer la petición ajax
//Como datos a enviar, el objeto FormData que contiene la información de las imágenes
if(formdata){
$.ajax({
url : 'upload.php',
type : 'POST',
data : formdata,
processData : false,
contentType : false,
success : function(res){
document.getElementById('response').innerHTML = res;
}
});
}
});
}
}());
Desde ya muchas gracias por su tiempo..
Saludos a todos
Rebe.
:)
puedes validar en el método onchange del input file:
///...
input.addEventListener('change', function(evt){
var i = 0, len = input.files.length, img, reader, file;
if (len > 2) {
alert('Solo puedes seleccionar 2 imágenes');
input.value = '';
return false;
}
///...
Hola @Rebeca
Puedes validarlo como te lo indican acá, o también puedes validarlo contando simplemente la cantidad de archivos subidos, que dependerá del lenguaje del back-end (que en este caso es PHP). Es recomendable hacerlo tanto en el front-end como en el back-end, ya que si el usuario trata de subir más archivos de los que están permitidos, se ahorrará ancho de banda en el servidor y operaciones que son posibles en el front-end, pero por seguridad, también es necesario tener un sistema parecido en el back-end.
~ DtxdF
Hola chicos/as. Gracias por responder, me sirvió muchísimo la ayuda de JavaScript .. MUCHAS GRACIAS.
Del lado del servidor estoy usando PHP , puedo validar, pero recorro hasta los errores.. y no se como solucionarlo..
Si subo dos archivos, me sale dos veces que esta bien,...
no se si se puede colocar lo de php acá, creo que no..
Muchas gracias enserio, a todos, una pequeña ayuda hace seguir adelante.
Saludos
Rebe
@Rebeca
Si la cuestión es relacionada a tu duda, no hay problema; deja el código aquí, aunque indaga sobre la variable $_FILES.
Veáse:
*.- https://www.php.net/manual/es/reserved.variables.files.php
~ DtxdF
Hola A todos nuevamente... estoy viendo el tema de $_FILES[], tengo que sacar los nombres cambiarlos, validarlos ,etc..
Mi pregunta, perdón o disculpas por preguntar tanto es como formateo la visualización de las 2 imágenes que me muestra antes de mandar a PHP.. he probado de todo ,, pero es como que no me toma nada en html, me salen verticales las imágenes, quería agregar algo de estilos, o usar boostrap.. no se... estoy en blanco......
Buque la salida de "reader.readAsDataURL(file);" no encontré como darle formato y también busque formdata.append('images[]', file); ... tampoco sale mucha información o la poca que sale no la se utilizar..
la fila de html que se visualizan las imágenes es:
<div id="lista-imagenes" ></div>
Saludos y gracias por sus tiempo :)
Rebe