Rileva il supporto del browser dell'elemento di input del file HTML

Question

C'è un modo con un javascript/jquery/crazy-css-hack per rilevare se il browser dell'utente supporta il rendering di un elemento di caricamento file <input type="file" /> funzionale? Ad esempio, il browser safari su iOS non renderizza l'elemento e vorrei invece mostrare all'utente un messaggio che la funzionalità non è supportata. So di poter ispezionare l'agente utente e verificare se si tratta di un iphone/ipad/etc, ma non so quali altri browser lo supportano o non lo supportano o non lo supportano in futuro.

Answer 1

La risposta di Galambalazs mi ha indirizzato nella giusta direzione solo per iOS. Ho finito per usare questo:

function supportsFileInput() { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", "file"); 
    return dummy.disabled === false; 
} 

Tuttavia, non funziona per la maggior parte dei dispositivi Android, in quanto questa funzione restituisce sempre vero, ma rende il pulsante con il testo "Upload disabile".

Answer 2

È possibile scrivere una funzione per fare test dummy:

function supportInputType(type) { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", type); 
    return dummy.type !== "text"; 
} 

Meglio ancora se si desidera eseguire una sola volta:

var SUPPORT_INPUT_FILE = supportInputType("file"); 

Quindi è possibile utilizzare questo "costante" in tutto il tuo codice.

Il modo in cui funziona il test: innanzitutto crea un elemento fittizio. Avrà il valore predefinito type = "text". Quindi prova a impostarlo su file. Nel caso in cui il browser non supporti questo tipo rimarrà text.

Buon divertimento!

Answer 3

iOS esegue il rendering dell'elemento di input del file come "disabilitato". Quindi puoi testare se c'è un campo di input disabilitato. Ho usato jQuery per farlo.

jQuery(function($) { 
    $(this).find('[type=file]').each(function() { 
     if ($(this).attr('disabled')) { 
     // do sth. 
     }  
    }) 
});