Como contar los archivos que estoy subiendo asi limitarlo

Iniciado por Rebeca, Julio 13, 2021, 04:38:02 PM

Tema anterior - Siguiente tema

0 Miembros y 3 Visitantes están viendo este tema.

Julio 13, 2021, 04:38:02 PM Ultima modificación: Julio 13, 2021, 05:20:29 PM por Gabriela
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..
Código: javascript

(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:

Código: javascript

///...
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;
    }
///...

No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

Acepta con humildad y aprecio que en la vida la muerte es inevitable y amarás ésta, adorando la muerte

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
PGP :: <D82F366940155CB043147178C4E075FC4403BDDC>

~ 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:

*.- No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

~ DtxdF
PGP :: <D82F366940155CB043147178C4E075FC4403BDDC>

~ DtxdF

Julio 14, 2021, 08:24:55 PM #5 Ultima modificación: Julio 14, 2021, 08:28:39 PM por Rebeca
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