在Javascript中克隆一个文件input元素

我有一个文件input元素，需要克隆后，用户浏览并select一个file upload。 我开始使用obj.cloneNode（），一切工作正常，直到我试图在IE中使用它。

我从此尝试使用jQuery的克隆方法，如下所示：

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

在FireFox中按预期工作，但在IE中却不行。

我卡住了。 任何人有一些build议？

Answer 1

编辑文件表单域是一个安全风险，因此在大多数浏览器上被禁用， 应该在Firefox上禁用。 依靠这个function不是一个好主意。 试想一下，如果有人能够使用JavaScript来改变一个隐藏的file upload字段，比方说，

C：\用户\人\文件\财务

要么

C：\用户\人\应用程序数据\微软\为Outlook.pst

🙂

Answer 2

猜测你需要这个function，所以你可以克隆input元素，并把它放到一个隐藏的窗体，然后将其POST到一个隐藏的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 3

在jQuery的fileupload小部件中有一个文件inputreplace方法来绕过变化事件侦听器只发射一次。

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

（jquery.fileupload.js中的_replaceFileInput方法）

Answer 4

您可以应用其他方法。 你必须发送真实的元素到一个iframe和克隆的元素插入forms。 例如：

 $("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浏览器IEinput文件被复位。