Clonare un elemento di input di file in Javascript

Question

Ho un elemento di input di file che deve essere clonato dopo che l'utente ha cercato e selezionato un file da caricare. Ho iniziato usando obj.cloneNode () e tutto ha funzionato bene, fino a quando non ho provato a usarlo in IE.

Da allora ho provato ad usare il metodo clone di jQuery come segue:

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

Funziona come previsto in FireFox, ma di nuovo non in IE.

Sono bloccato. Qualcuno ha qualche suggerimento?

Answer 1

La modifica del campo del modulo file è un rischio per la sicurezza e pertanto è disabilitata sulla maggior parte dei browser e dovrebbe essere disabilitato su Firefox. Non è una buona idea fare affidamento su questa funzione. Immagina se qualcuno fosse in grado, usando javascript, di cambiare un campo di caricamento di file nascosto, diciamo,

c: \ Users \ persona \ Documenti \ Finanze

o

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

:)

Answer 2

Supponendo che tu abbia bisogno di questa funzionalità in modo da poter clonare l'elemento di input e metterlo in una forma nascosta che poi viene postato su un iframe nascosto ...

L'implementazione di element.clone () di IE non riporta il valore per input type = " file " ;, quindi devi fare il contrario:

// 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 3

Nel widget di fileupload jQuery esiste un metodo di sostituzione dell'input di file per aggirare il listener di eventi change che si attiva una sola volta.

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

(metodo _replaceFileInput in jquery.fileupload.js)

Answer 4

Puoi applicare un altro metodo. Devi inviare un elemento reale a un iframe e inserire elementi clonati nel modulo. Ad esempio:

$("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());
    }
);

Se si utilizza questo metodo, il modulo invierà il file a un server, ma solo una nota, in Chrome viene reimpostato un input IE con i file.