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

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

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:

*.- You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

~ 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