如何克隆输入类型文件的数组？答案

【问题标题】：How can i clone array of input type file?如何克隆输入类型文件的数组？
【发布时间】：2013-05-16 06:43:48
【问题描述】：

我想在阅读How clone value input file时解决这个问题？

我有输入类型文件的数组

<input type="file" class = "focus_image" name="focus_image[]" >

我想将数组的值输入类型文件克隆到另一个相同的输入类型文件中

<input type="file" class = "focus_image" name="clone[]">

我知道这个问题可以用 javascript 解决，但我无法实现帮我解决这个问题！

编辑我有弹出窗口，用户可以添加更多图像，然后用户单击按钮保存在弹出窗口中，然后弹出窗口关闭，我将文件的值输入类型数组从弹出窗口复制到范围弹出窗口（从 focus_image 到克隆）

【问题讨论】：

您想用name="clone[]" 创建一个新的input 字段吗？
我想没人知道你想做什么。
告诉我们您想要实现的目标。包括处理上传的这个文件。也许你应该在上传到服务器后复制这个文件？为什么要两次上传同一个文件？
我有弹出窗口，用户可以添加更多图像，然后用户单击按钮保存在弹出窗口中，然后弹出窗口关闭，我将值输入类型的文件数组从弹出窗口复制到范围弹出窗口
我想将 focus_image 中的值克隆到克隆

标签： javascript html

【解决方案1】：

首先，您必须获取您关心的元素。您可能希望将 querySelectorAll 与适当的选择器一起使用。或者你可以像我一样做，只需给原始输入一个唯一的 id。

接下来，您必须创建所需元素的克隆。

在此之后，您需要更改名称和（如果您已按照我的方式完成 - 给它一个 id）id。

最后，您需要将克隆附加到 DOM。

也许有点像这样？

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}

window.addEventListener('load', mInit, false);

function mInit()
{
    var elem = byId('origElemId');
    var copy = elem.cloneNode(true);

    copy.setAttribute('name', 'clone[]');
    copy.setAttribute('id', 'copyElemId');
    document.body.appendChild(copy);
}

</script>
<style>
</style>
</head>
<body>
    <input id='origElemId' type="file" class = "focus_image" name="focus_image[]" >
</body>
</html>

【讨论】：

【解决方案2】：

试试这个，

HTML

<input type="file" class = "focus_image" name="focus_image[]" onChange="document.getElementById('cloned').value=this.value">

<input type="file" class = "focus_image" name="clone" id="cloned">

【讨论】：

【解决方案3】：

//希望这对你有用 // 将此代码放入您的 Html 页面中

        <div id="form-content">
            <div id="cloned-content">
                <input type="file" class = "focus_image" name="focus_image[]" >                
            </div>
        </div>
    <a style="cursor: pointer" id="makeclone"> makeclone </a>

// 此代码将克隆您在 div cloned-cotent 中的所有字段

jQuery(document).ready(function() {

var cloneCounter = 1;
function makeClones() {
    // clone the div
    var clone = $("#cloned-content").clone(false);
    // change all id values to a new unique value by adding "_cloneX" to the end
    // where X is a number that increases each time you make a clone
    $("*", clone).add(clone).each(function() {
        if (this.id) {
            this.id = this.id + cloneCounter;
        }
        if (this.name) {
            this.name = this.name
        }
    });
    ++cloneCounter;
    $("#form-content").append(clone);                         

}

$("#makeclone").click(function() { 
    alert("Clicked Fired"); 
    makeClones();
});

});

【讨论】：