Cómo restringir mi entrada type = “file” para aceptar solo archivos de imagen png que no funcionen en Firefox

Estoy usando input type = “file”, ahora mi requisito es que solo quiero seleccionar imágenes png, es decir, cuando selecciono browse debería aplicarse un filtro “png”.

He referido a www.w3schools.com/tags/att_input_accept.asp y debajo está el código que estoy usando, esto funciona bien con Chrome pero no funciona con Firefox e IE.

Por favor, ¿alguien puede ayudarme a entender qué mal debo estar haciendo?

  

Below uses accept="image/*"

Below I need to accept only for png

Aquí hay un enlace violín http://jsfiddle.net/Jcgja/2/

Debe validarlo a través de un script java. A continuación se muestra el código para la validación de script java

 function CheckFileName() { var fileName = document.getElementById("uploadFile").value if (fileName == "") { alert("Browse to upload a valid File with png extension"); return false; } else if (fileName.split(".")[1].toUpperCase() == "PNG") return true; else { alert("File with " + fileName.split(".")[1] + " is invalid. Upload a validfile with png extensions"); return false; } return true; } 

La información de soporte del navegador en esa página de w3schools no es correcta.

Si marca esta página, verá que el atributo de accept no está implementado en Firefox:

https://developer.mozilla.org/en/HTML/Element/Input

Actualizar:
El atributo de accept ahora se implementa en Firefox, pero los usuarios que no tienen una versión reciente todavía no tendrán el soporte.

Como puede ver, el atributo ‘aceptar’ no es soportado adecuadamente por ninguno de los principales navegadores. Puede usar una validación de JavaScript en el evento de envío de formulario para verificar si el tipo de archivo es correcto, de lo contrario devuelve falso.

No use este atributo como una herramienta de validación. Las cargas de archivos deben validarse en el servidor.

  0) { echo "Error: " . $_FILES["pic1"]["error"] . "
"; } else { echo "Upload: " . $_FILES["pic1"]["name"] . "
"; echo "Type: " . $_FILES["pic1"]["type"] . "
"; echo "Size: " . ($_FILES["pic1"]["size"] / 1024) . " Kb
"; echo "Stored in: " . $_FILES["pic1"]["tmp_name"]; } } else { echo "Invalid file"; } ?>

Esta es solo la validación del tipo de archivo. No todo el script de carga.

puede usar la función javascript en el evento Chane de una función de archivo

 filesChange() { checkFile(); }  

Como se señala en los comentarios, la solución aceptada no funcionará con un nombre de archivo con varios “.” en eso. Esto debería manejarlo mejor, es más a prueba de errores y flexible, y puede administrar las extensiones aceptadas editando la matriz .

 function checkFileExtension() { var fileName = document.getElementById("uploadFile").value; if(!fileName) return false; var extension = fileName.split("."); if(extension && extension.length > 1){ extension = [extension.length-1].toUpperCase(); if (["PNG"].indexOf(extension) != -1) return true; else{ alert("Browse to upload a valid File with png extension"); return false; } } else{ alert("Browse to upload a valid File with png extension"); return false; } }