我有一个文件输入元素，需要在用户浏览并选择要上传的文件后进行克隆。我开始使用 obj.cloneNode() 并且一切正常，直到我尝试在 IE 中使用它。
我已经尝试使用 jQuery 的 clone 方法如下：
var tmp = jQuery('#categoryImageFileInput_'+id).clone();
var clone = tmp[0];
在 FireFox 中按预期工作，但在 IE 中又不行。
我被困住了。有人有什么建议吗？
在 Javascript 中克隆文件输入元素
IT技术
javascript
jquery
internet-explorer
clone
2021-03-06 10:07:19
4个回答
猜测您需要此功能，以便您可以克隆输入元素并将其放入隐藏表单中，然后将其发布到隐藏的 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");
编辑文件表单字段存在安全风险，因此在大多数浏览器上被禁用，在 firefox 上应该被禁用。依赖此功能不是一个好主意。想象一下，如果有人能够使用 javascript 将隐藏的文件上传字段更改为，比如说，
c:\Users\Person\Documents\Finances
或者
C:\Users\Person\AppData\Microsoft\Outlook.pst
:)
在 jQuery fileupload 小部件中，有一个文件输入替换方法可以绕过更改事件侦听器仅触发一次。
https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload.js#L769
（jquery.fileupload.js 中的_replaceFileInput 方法）
您可以应用其他方法。您必须将真实元素发送到 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 输入文件会被重置。