Javascript 如何克隆输入类型文件的数组？_Javascript_Html

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

javascript html

Javascript 如何克隆输入类型文件的数组？,javascript,html,Javascript,Html,我想在阅读时解决这个问题我有一个输入类型文件数组 <input type="file" class = "focus_image" name="focus_image[]" > 我想将数组的值输入类型文件克隆到另一个输入类型文件，如下所示 <input type="file" class = "focus_image" name="clone[]"> 我知道这个问题可以用javascript解决，但我无法实现帮助我解决这个问题编辑我有一个弹出窗口，用户可

我想在阅读时解决这个问题

我有一个输入类型文件数组

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

我想将数组的值输入类型文件克隆到另一个输入类型文件，如下所示

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

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

编辑

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

试试这个

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">

首先，您必须获得所关心的元素。您可能希望将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>


函数byId（e）{returndocument.getElementById（e）；}
window.addEventListener（'load'，mInit，false）；
函数mInit（）
{
var elem=byId（'origElemId'）；
var copy=elem.cloneNode（真）；
copy.setAttribute（'name'，'clone[]）；
copy.setAttribute（'id'，'copyElemId'）；
文件.正文.附件（复印件）；
}

//希望这对您有用 //将此代码放在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>

}))

你想用

name=“clone[]”

创建一个新的

input

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

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