Как получить файлы из <input type='file'.../"> (косвенные) с помощью javascript

У меня проблема с "тегом ввода" в браузерах без IE

<input type="file" ...

Я пытаюсь написать свой загрузчик, просто используя javascript и asp.net.

У меня нет проблем с загрузкой файлов.

Моя проблема возникла. Когда я хотел получить мои файлы в браузерах без IE с помощью

<input type="file" ...

Я не хочу использовать непосредственно из input, потому что его внешний вид не изменяется правильно

Я написал этот код для получения файлов с жесткого диска:

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

В IE он работает очень хорошо и возвращает мои файлы в настоящее время; В Chrome и Firefox после загрузки "диалога ввода файлов" он не может вернуть какой-либо файл. И Opera и Safari полностью отключены.

Я могу исправить это с помощью этого трюка, но в целом это не хорошо.

_el_upload.click();
alert();

Я думаю, что "callback" или "wait function" может это исправить, но я не могу справиться с этим.

Ответы

Ответ 1

Если вы хотите стилизовать элемент ввода файла, посмотрите диалоговое окно открытия файла в javascript. Если вы хотите захватить файлы, связанные с элементом ввода файла, вы должны сделать что-то вроде этого:

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

Подробнее о типе FileList см. эту статью MDN.

Обратите внимание, что приведенный выше код будет работать только в браузерах, поддерживающих API файлов. Например, для IE9 и более ранних версий у вас есть только доступ к имени файла. Элемент ввода не имеет свойства files в браузерах без файлов API.

Ответ 2

Исходя из ответа Рэя Николуса:

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

использование этого также будет работать:

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