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

Question

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

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

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

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

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

Answer 1

Предполагая, что вам нужна эта функциональность, вы можете клонировать элемент ввода и поместить его в скрытую форму, которая затем помещается в скрытый 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's 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");

Answer 2

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

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

Или

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

:)

Answer 3

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

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

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

Answer 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 с файлами.