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

Question

Estoy usando input type = "file", ahora mi requisito es que solo quiero seleccionar imágenes png, es cuando seleccione navegar un filtro "png" se debe aplicar.

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

¿Alguien puede ayudarme a entender qué mal debo estar haciendo?

<h2>Below uses accept="image/*"</h2> 
<input type="file" name="pic1" accept="image/*" /> 

<h2>Below I need to accept only for png</h2> 
<input type="file" name="pic1" accept="image/png" /> 

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

Answer 1

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

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

Answer 2

Como se puede ver, el 'aceptar' atributo no está bien apoyado por cualquiera 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 herramienta de validación. Las cargas de archivos deben validarse en el servidor.

Answer 3

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

Si marca esta página, se ve que el accept lo atribuyen no está implementado en Firefox:

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

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

Answer 4

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

Esto es sólo la validación del tipo de archivo. No todo el script de carga.

Answer 5

puede utilizar Javascript caso onChane función de una función de archivo

filesChange() { 
     checkFile(); 
     } 
<script type="text/javascript"> 
function checkFile() { 
    var fileElement = document.getElementById("uploadFile"); 
    var fileExtension = ""; 
    if (fileElement.value.lastIndexOf(".") > 0) { 
     fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length); 
    } 
    if (fileExtension == "gif") { 
     return true; 
    } 
    else { 
     alert("You must select a GIF file for upload"); 
     return false; 
    } 
} 

Answer 6

Como se señaló en los comentarios, solución aceptada no va a 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; 
    } 
}