2012-10-26 7 views
7

Possiamo rilevare se un browser supporta trascinando un file sopra un <input type="file" />?rilevamento Caratteristica per la capacità di abbandonare file su file di input HTML

Per esempio, questo è possibile in Chrome, ma non in IE8.

Modernizr.draganddrop è una possibilità ma è la scelta giusta? Non sto aggiungendo alcun gestore di eventi drag/drop personalizzato.

Aggiornamento

Per verificare la risposta di Joe ecco un esempio jQuery che dovrebbe fermare la caduta di file. Verificato in Chrome e Firefox.

$yourFileInput.on('drop', function() { 
    return false; // if Joe's explanation was right, file will not be dropped 
}); 
+0

Perché vuoi sapere? –

+0

Sto migliorando un'area della pagina per accettare un file, che verrà poi caricato (utilizzando la strategia iframe per necessità). L'input trasparente riceve il file e quindi viene spostato in un modulo e inviato. Non voglio aggiungere l'input per i browser che non supportano la funzionalità. –

+0

Personalmente, vorrei aggiungere l'input per ogni browser. –

risposta

2

Penso che la risposta a Detecting support for a given JavaScript event? potrebbe aiutarti. Regolando il codice per testare l'input anziché Div, e il test per l'evento "Drop" sembra funzionare correttamente per me.

qui riprodotto in modo da non dover scegliere attraverso (e regolato un po ', dal momento che sembra è sufficiente rilevare questo una caratteristica):

function isEventSupported(eventName) { 
    var el = document.createElement('input'); 
    eventName = 'on' + eventName; 
    var isSupported = (eventName in el); 
    if (!isSupported) { 
    el.setAttribute(eventName, 'return;'); 
    isSupported = typeof el[eventName] == 'function'; 
    } 
    el = null; 
    return isSupported; 
} 
if(isEventSupported('drop')){ 
    //Browser supports dropping a file onto Input 
} else { 
    //Fall back, men! 
} 
+0

Questo è un buon approccio. Sei convinto che questi browser utilizzino effettivamente l'evento standard 'drop' per i file che vengono rilasciati sull'input, piuttosto che qualcosa di casalingo? –

+0

Fantastico, ho confermato che hai ragione, restituendo "false" dall'evento di rilascio e osservando che il rilascio non funziona. Grazie Joe. –

+0

Sempre benvenuto! Suggerisco anche di upvoting la risposta sull'altra pagina, perché l'approccio appartiene a @kangax e l'ho trovato solo per quel post :) – joequincy