Jak zdobyć pliki z <input type = 'Plik' ... /> (pośredni) z JavaScript

Question

Mam problem z tagiem "wejściowego" w przeglądarkach innych niż IE

<input type="file" ... 

Próbuję napisać mój przesyłający, używając tylko javascript i asp.net.

Nie mam problemu z przesyłaniem plików.

Mój problem wystąpił Gdy chciałem, aby moje pliki w przeglądarkach innych niż IE z

<input type="file" ... 

Nie chcę używać bezpośrednio od input ponieważ jego wygląd nie zmienia poprawnie

napisałem ten kod aby uzyskać pliki z dysku twardego:

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

W IE działa całkiem nieźle i obecnie zwraca moje pliki; W przeglądarce Chrome i Firefox, po wczytaniu "okna dialogowego wprowadzania pliku", nie może zwrócić żadnego pliku. Opera i Safari są całkowicie niedostępne.

Mogę to naprawić, ale to nie jest dobre.

_el_upload.click(); 
alert(); 

Myślę, że "callback" lub "funkcja wait" może to naprawić, ale nie mogę sobie z tym poradzić.

Answer 1

Jeśli szukasz stylu elementu wejściowego do pliku, spójrz na open file dialog box in javascript. Jeśli szukasz, aby pobrać pliki związane z elementem wejściowym plik, musisz zrobić coś takiego:

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

Zobacz this MDN article uzyskać więcej informacji na temat rodzaju FileList.

Pamiętaj, że powyższy kod działa tylko w przeglądarkach obsługujących interfejs API plików. Dla IE9 i wcześniejszych, masz dostęp tylko do nazwy pliku. Element wejściowy nie ma właściwości w przeglądarkach innych niż pliki API.