Клонировать элемент ввода файла в Javascript

У меня есть элемент ввода файла, который нужно клонировать после просмотра пользователем и выбора файла для загрузки. Я начал с использования obj.cloneNode(), и все работало нормально, то есть до тех пор, пока я не попытался использовать его в IE.

С тех пор я пытался использовать метод клонирования jQuery следующим образом:

var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];

Работает как и ожидалось в FireFox, но опять же не в IE.

Я застрял. У кого-нибудь есть предложения?

Ответы

Ответ 1

Редактирование поля формы файла является угрозой безопасности и, следовательно, отключено в большинстве браузеров и должно быть отключено в firefox. Не стоит полагаться на эту функцию. Представьте себе, если кто-то смог, используя javascript, изменить поле загрузки скрытого файла, скажем,

C:\Users\Person\Documents\Финансы

или

C:\Users\Person\AppData\Microsoft\Outlook.pst

Ответ 2

Угадаю, что вам нужна эта функциональность, чтобы вы могли клонировать элемент ввода и помещать его в скрытую форму, которая затем получает POSTED в скрытый iframe...

Реализация IE element.clone() не переносит значение для input type="file", поэтому вам нужно идти наоборот:

// Clone the "real" input element
var real = $("#categoryImageFileInput_" + id);
var cloned = real.clone(true);

// Put the cloned element directly after the real element
// (the cloned element will take the real input element place in your UI
// after you move the real element in the next step)
real.hide();
cloned.insertAfter(real);   

// Move the real element to the hidden form - you can then submit it
real.appendTo("#some-hidden-form");

Ответ 3

В виджетах jQuery для загрузки файлов есть метод замены входных файлов, чтобы обходить только прослушиватель событий изменения только.

https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769

(_ replaceFileInput метод в jquery.fileupload.js)

Ответ 4

Вы можете применить другой метод. Вы должны отправить реальный элемент в iframe и вставить клонированные элементы в форму. Например:

$("INPUT[type='file']").each
(
    function(index, element)
    {
    $(this).wrap("<div></div>");
    var Div = $(this).parent();
    $(this).appendTo("FORM[name='forIframe']"); // This form for iframe
    Div.append($(this).clone());
    }
);

Если вы используете этот метод, ваша форма отправит файл на сервер, но только одно примечание, в Chrome будут сброшены входы IE с файлами.