FormData существующей формы не работает в IE10 из-за запуска через JS

Я просто создаю веб-приложение, используя новый класс FormData, который предоставляет HTML5.

Чтобы иметь кнопку «выбрать файл» в пользовательском стиле, я хочу вызвать событие щелчка в элементе ввода файла через javascript.

Это работает в IE10 и Chrome, но когда я пытаюсь создать экземпляр FormData, используя форму, в IE10 происходит сбой с сообщением «SCRIPT5 «Отказано в доступе»» в этой строке:

var fd = new FormData(f.get(0));

Если я запускаю диалоговое окно открытия файла, используя собственный элемент ввода, он работает и в IE10.

Для тестирования см. этот jsfiddle: http://jsfiddle.net/s9aTg/2/

Есть ли возможность заставить это работать в IE10, или я застрял с уродливой кнопкой по умолчанию «выбрать файл»?

Заранее спасибо, МакФарлейн


javascript html internet-explorer-10
person McFarlane    schedule 29.10.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Другой обходной путь:

var input = document.querySelector('input[type=file]');
var fd = new FormData();
for (var i = 0, l = input.files.length; i < l; i++) {
    fd.append('file', input.files[i]);
}

Это работает, даже если файлы выбираются после нажатия на стилизованную кнопку.

person Anton Morozov    schedule 21.11.2012

arrow_upward
0
arrow_downward

Я не могу проверить, но попробуйте добавить данные.

var formData = new FormData();
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
$.each(files, function () {
  formData.append("files[]", this);
});
person Community    schedule 29.10.2012
comment
а откуда взять эти файлы? какое событие было запущено в вашем фрагменте? - person McFarlane; 30.10.2012
comment
Вы можете привязываться к событию изменения и получать файлы из ввода. Например (просто удалить событие): bit.ly/VAxwI0 - person ; 30.10.2012

arrow_upward
0
arrow_downward

IE в своем стиле, даже в 10 версии :)

Я не знаю решения, но, возможно, вам поможет этот обходной путь: попробуйте разместить прозрачный элемент ввода над стилизованной кнопкой.

<span class="open-wrapper">
    <input type="file" name="file" />
    <span class="open">open Dialog</span>
</span>

...

.open-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.open-wrapper input {
    position: absolute;
    right: 0;
    opacity: 0;
}

http://jsfiddle.net/UKV3B/

person Anton Morozov    schedule 20.11.2012