come ottenere i file da <input type = 'file' ... /> (indiretta) con javascript

Question

Ho problemi con "tag input" nei browser non IE

<input type="file" ... 

Sto cercando di scrivere il mio uploader, usando solo javascript e asp.net.

Non ho problemi a caricare i file.

Il mio problema si è verificato quando ho voluto ottenere il mio file nei browser non IE con

<input type="file" ... 

Non voglio usare direttamente dal input perché il suo aspetto non cambia correttamente

Ho scritto questo codice per ottenere file dal disco rigido:

function $tag(_str_tag) { 
return document.getElementsByTagName(_str_tag); 
} 

function $create(_str_tag) { 
    return document.createElement(_str_tag); 
} 


function $open_file() { 
    _el_upload = $create("input"); 
    _el_body = $tag("body")[0]; 
    _el_upload.setAttribute("type", "file"); 
    _el_upload.style.visibility = "hidden"; 
    _el_upload.setAttribute("multiple", "multiple"); 
    _el_upload.setAttribute("position", "absolute"); 
    _el_body.appendChild(_el_upload); 
    _el_upload.click(); 
    _el_body.removeChild(_el_upload); 
    return _el_upload.files; 
} 

In IE funziona piuttosto bene e restituisce i miei file al momento; In Chrome e Firefox, dopo aver caricato "finestra di dialogo per l'immissione dei file", non è possibile restituire alcun file. E Opera e Safari sono completamente fuori.

Posso risolvere il problema con questo trucco, ma fondamentalmente non è buono.

_el_upload.click(); 
alert(); 

Penso che "callback" o "wait function" possano risolvere il problema, ma non riesco a gestirlo.

Answer 1

Se si desidera modellare un elemento di input di file, vedere open file dialog box in javascript. Se stai cercando di afferrare i file associati a un elemento di input file, è necessario fare qualcosa di simile:

inputElement.onchange = function(event) { 
    var fileList = inputElement.files; 
    //TODO do something with fileList. 
} 

Vedi this MDN article per maggiori informazioni sul tipo FileList.

Si noti che il codice sopra funzionerà solo nei browser che supportano l'API File. Per IE9 e precedenti, ad esempio, hai solo accesso al nome del file. L'elemento di input non ha la proprietà files nei browser API non file.