我如何克隆输入类型文件的数组?

时间:2013-05-16 06:43:48

标签: javascript html

我想在阅读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到克隆)

3 个答案:

答案 0 :(得分:1)

首先,你必须得到你所关注的元素。您可能希望使用querySelectorAll和适当的选择器。或者你可以像我一样做,并且jujst给原始输入一个唯一的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>

答案 1 :(得分:0)

试试这个,

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

答案 2 :(得分:0)

//希望这对你有用 //将此代码放入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();
});

});