detectar si <input type = "archivo" /> se apoya

Question

Estoy construyendo una versión móvil de mi sitio web que tiene una instalación de carga de archivos, se accede a través de un 'Cargar el botón'

quisiera ocultar el botón de usuarios de iPhone, ya que el control simplemente aparece en gris, ¿es esto posible?

Realmente no quiero detectar el iPhone; Siento que sería mucho mejor para detectar la característica - por lo que es empezar a funcionar de forma automática debe habilitar esta manzana (o el teléfono es Jailbroken, o algo así ...)

Answer 1

función para verificar si se implementa input[type=file]:

function isInputTypeFileImplemented() { 
    var elem = document.createElement("input"); 
    elem.type = "file"; 
    if (elem.disabled) return false; 
    try { 
     elem.value = "Test"; // Throws error if type=file is implemented 
     return elem.value != "Test"; 
    } catch(e) { 
     return elem.type == "file"; 
    } 
} 

violín: http://jsfiddle.net/8EqEE/9

Answer 2

Tenga en cuenta que no he probado esto, así que no estoy seguro de si funcionaría. Esta es básicamente la forma en que prueba el soporte para los tipos de entrada HTML5 (por ejemplo, <input type="color" />). Pero se puede probar:

function upload_supported() { 
    var file_input = document.createElement("input"); 
    file_input.setAttribute("type", "file"); 
    return file_input.type !== "text"; 
} 

Esto se basa en el comportamiento del navegador de restablecer el atributo de tipo de text cuando se encuentra con un tipo de entrada desconocida. Sin embargo, dado que dices que aparece en gris, significa que no es desconocido, per se.

Answer 3

Crea un <input type="file"> y comprueba si está deshabilitado.

function isFileUploadImpossible() { 
    var el = document.createElement("input"); 
    el.setAttribute("type", "file"); 
    return el.disabled; 
} 

Probado en iOS 4.2.1, Android 2.3.4, Chrome 17, Firefox 11, IE7.

Answer 4

Yo también he estado buscando una solución a este problema. No es tan simple como las soluciones sugeridas aquí. Algunos navegadores afirman que son compatibles con ciertos tipos, pero algunos de esos tipos se han desactivado debido a que están incompletos. Entonces, lo que termina sucediendo es que cuando devuelve InputElement.type puede regresar como el tipo "archivo" o "tel" o "número", pero el navegador lo sigue tratando como "texto". Lamentablemente, no creo que puede hacer esto a menos que pueda hablar con los desarrolladores del navegador para que lo arreglen de modo que los tipos deshabilitados regresen como texto ...

como nota adicional IE devuelve todos los tipos no compatibles como texto. He probado esto con las últimas versiones de Chrome y FF también. Chrome "miente" sobre soporte para números, tipos de teléfono que conozco hasta ahora y FF también devuelve tel cuando no es compatible. Estoy seguro de que esto también sucede con otros tipos.

Answer 5

Un híbrido de la comprobación de errores basada en valores (try/catch) más una comprobación de desactivado parece dar una buena cobertura en todos los navegadores de PC y móviles que probamos.

alert((function isInputTypeFileImplemented(){ 
    var elem; 
    try { 
    elem = document.createElement("input"); 
    elem.type = "file"; 
    } catch(e) { 
    return -1; // type=file is not implemented 
    } 
    try { 
    elem.value = "Test"; 
    if (elem.value == "Test") { 
     return -2; // type=file should throw an error on line above 
    } else { 
     if (elem.disabled) { 
     return -3; // type=file disabled in iOS < 6 
     } else { 
     return true; 
     } 
    } 
    } catch(e){ 
    return true; // type=file implemented correctly 
    } 
})()) 

NOTA: Puede cambiar el orden lógico si prefiere un flujo diferente.

violín: http://jsfiddle.net/BRk5J/

Answer 6

ACTUALIZACIÓN: Esto es ahora parte de Modernizr ahora.

Hay un pull request for modernizr que parece funcionar.Esencialmente solo comprueba:

var elem = document.createElement('input'); 
elem.type = 'file'; 
return !elem.disabled; 

Answer 7

Actualice la solución de Rob W que también es compatible con iOS 5 + iOS 6 Beta. (Causar una excepción no es lo que recomendaría, pero esto funciona):

 function isInputTypeFileImplemented(){ 
     var elem = document.createElement("input"); 
     elem.type = "file"; 
     try { 
      elem.value = "Test"; //If type=file is implemented, this would throw an 
      if (elem.disabled) { 
       return false; 
      } else { 
       return true; 
      } 
     } catch(e){ 
      return false; 
     } 
    }