0

Como muestro el nombre de los archivos seleccionados, el tamaño de los archivos seleccionados y el tipo de archivo.

He intentado con este código, pero no se muestra nada al abrir el navegador.

    <input type="file" id=files multiple>
    <script>
        var insertar_en= document.querySelector("#archivos ul");
        File_in = document.querySelector("#files")
        File_in.onchange = function(e){
            var files = e.target.files;
            for(var i=0,f;f=files[i];++i){
                var archivo = document.createElement("li");
                archivo.innerHTML = f.name + " - (<b>" + f.type + "</b>)" + f.size;
                insertar_en.appendChild(archivo)
            }
        }
    </script>
1
  • como tienes el html?
    – Javier
    el 26 may. 2021 a las 16:50

1 respuesta 1

0

Similar a tu código, este hace lo que estás buscando.

Muestra el nombre del archivo, la extensión del archivo, el peso del archivo (en bytes), y la última fecha de modificación del archivo; en una lista ul li.

<input type="file" id="files" name="files[]" multiple />

// Aqui se ve todo la info del archivo
<output id="list"></output>

El JavaScript. Es necesario primero verificar si la API del archivo es compatible con el navegador:

// verificar si la API soporta archivo. 
if (window.File && window.FileReader && window.FileList && window.Blob) { 
  // muy bien
} else { 
 alert('la API de archivos no es compatible con este navegador '); 
}

Luego la super función:

function handleFileSelect(evt) { 

 var files = evt.target.files; 
 var output = []; 
 for (var i = 0, f; f = files[i]; i++) { 
 
 output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
 f.size, ' bytes, last modified: ', 
 f.lastModifiedDate.toLocaleDateString(), '</li>'); 
 
} 

document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 

} 

document.getElementById('files').addEventListener('change', handleFileSelect, false);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.