Validar extensiones de archivos...

[andrewp]

Holas chicos y chicas...

Tengo un problemilla que no me deja avanzar y que me tiene unpoco desesperado. He incorporado un script a un campo para subir multiples archivos que no hace otra cosa que imprimir en la pantalla los archivos que se van a subir. Este funciona bien y no hay problemas en su ejecusión.

Sin embargo, he querido añadirle un condicional extra, mediante el cual se verifica su extensión y alerta al usuario que la extensión no es válida. Lo que he hecho es algo así:

Código Javascript:

function ImprimirLista() {
                                    var input = document.getElementById('fotos').value.lastIndexOf(".jpg", ".png")
                                        if(input==-1)
                                        {
                                            alert('Solo se admite ficheros .jpg o .png')
                                            return false;
                                        }
                                        else {
.... el código para imprimir en pantalla la lista de archivos...
 

El problema es que acepta cualquier tipo de archivos y solo verifica el primero cuando se trata de multiples archivos.

No soy experto en JS y es por eso que os pido vuestra ayuda.

Mil gracias

[emprear]

mirá esta script
http://foros.emprear.com/html/file-input/

mirá la primer función nombre_ar(), se llama con el evento onchange para en el mismo input file y pasa el id del mismo. si valida pone una leyenda en el innerHTML de un div, podrías hacer lo mismo para cada input file y no en el submit del form
Como en realidad no la hice para subir múltiples archivos, no te fijes en el resto

Saludos

[andrewp]

Gracias empreae por compartir el codigo. He incluído esa pequeña parte de tu código en el que he descrito con anterioridad y funciona bien, salvo que si selecciono primero un .XLS y luego un .JPG (por ejemplo) y para una validación que no permita .XLS, lo admite sin problemas. So solo selecciono el .XLS tengo la alerta, pero si lo incluyo en una selección multiple, lo acepta...

Sabes cómo podría solventar el problema para un campo que permite la selección multiple de archivos?

Gracias!

[emprear]

yo supuse que tenías varios campos file, pero por lo que decís estás usando el atributo multiple, tendría que analizarlo. La única vez que lo hice validé con el php, no con el javascript.
Por otra parte creo que se podría usar ajax, y d esa manera verificar con php y pasar una respuesta al js
Si descubro algo te comento
Saludos

[andrewp]

Gracias nuevamente por tu valiosísima ayuda.

La idea es chequear las extensiones antes de subirlos. Tengo la posibilidad de hacerlo en PHP también, pero debo submitar el formulario para que se verifiquen en la acción del formulario... LA ventaja de JS es que lo hace al vuelo y de cualquier manera la alerta salta antes del 'submit'.

No sé si en algo te pueda ayudar la validación múltiple que pongo abajo, en la que se chequea solo si el campo está vacio para alertarlo... Igual te puede ayudar el 'for'?

Código Javascript:

<script language="javascript" type="application/javascript">
function verif() {
var node_list = document.getElementsByTagName('input');
for (var i = 0; i < node_list.length; i++) {
var node = node_list[i];
if (node.getAttribute('type') == 'file') {
if (node.value == '') {
alert("Please choose a file");
return false;
}
}
}
}
</script>
 

Gracias de nuevo...

[emprear]

Te explico, todo este tipo de validaciones las estoy haciendo usando Ajax+php por la siguiente razón.

Supongamos que en nuestro js, tenemos algo como
var ext_validas = /\.(pdf|gif|jpg|png)$/i.test(nombre_archivo);
ó algún otro método que indique las extensiones válidas, ahora imaginate que antes de hacer el submit, el usuario utiliza cualquiera de las herramientas de desarrollo que hoy en día utilizan los navegadores, y, malintecionadamente edita tu código por
var ext_validas = /\.(pdf|gif|jpg|png|zip|exe)$/i.test(nombre_archivo);
tan solo con eso ya está violando tus reglas.
Por eso lo definitivo es validar en php, y si se justifica, utilizar ajax para hacer el post y mostrar los mensajes de error.
Agregar un captcha bacaso en sesiones también aumenta tu seguridad
A propósito, estuve analizando esto
http://davidwalsh.name/multiple-file-upload
y puede que sirva a lo que necesitas.

Saludos

[andrewp]

Una vez mil gracias por tu valiosa ayuda. Es cierto que JS no es lo más seguro para validar... solo deshabilitandolo con alguna herramienta del navegador cualquier cosa puede pasar sin necesidad de hackear el código.

También tienes razón en cuanto es siempre mejor validar del lado del servidor y con el mayor número de niveles.

Gracias por el vínculo, de hecho es el que uso para imprimir los archivos que se van a subir. Y es precisamente a ese código la variación que he intentado aplicar para que se quede en blanco y alerte en caso de tener una extensión no válida.

En cualquier caso, después del submit tengo un filtro en PHP que guarda solamente las extensiones aceptadas, el tema de JS me hubiese venido muy bien de cara a usuarios que no son muy expertos y no suelen leer las instrucciones de los formularios.

Gracias de nuevo por tu valiosa aportación.

[villano4]

Saludos, yo para subir multples archivos uso este

http://www.fyneworks.com/jquery/multiple-file-upload/

que esta hecho en base a jquery, si no usas el jquery, ps no creo que te sirva.

[andrewp]

Gracias Villano4... Lo único del sistema en "jQuery Multiple File Upload Plugin" es que si necesitas subir cien archivos de una sola vez, no tienes la posibilidad que HTML5 te ofrece... Sin embargo, supongo que se puede adaptar .

Saludos y Gracias!