克隆CSS样式文件上传按钮

Question

我使用CSS设置了<input type="file"/>样式。当我点击+按钮时，它将被克隆。然而，只有使用无样式的上传按钮才能直观地发生这种情况。

提示：为了用标准按钮替换标准按钮，我设置了input[type="file"] { display:none }。在评论此行时，克隆的上传按钮变为可见，但没有样式。

有没有办法克隆CSS样式的按钮？

参见 Fiddle

Answer 1

除了label之外，您还需要克隆input。

这会克隆第一个label，同时确保它与自己的input一起使用：

$('label').first()
  .clone(true)
  .attr('for','img'+addcounter)
  .insertBefore($('#add'));

Fiddle

Answer 2

重新配置HTML，然后克隆标签

input等表单元素可以是label元素（w3.org, 17.9.1 The LABEL element）的子元素，这样做可以更容易地使用一个语句克隆它们。

下面，我执行此操作，然后将id属性分配给父标签，以便更轻松地进行定位。

<label id="img1" class="uploadbutton">Choose File
    <input type="file" name="img1"/>
</label>

注意：您可以在id上保留input属性，如果您愿意，只需使用jQuery的.parent()方法获取label即可。绘制栅栏的方法不止一种。

然后，脚本在一个语句中克隆label及其子项。请注意添加.find(input)以设置子input上的属性。

示例：

var addcounter = 2;
$("#add").on('click', function (e) {
    
    //Create a new select box
    $('#img1')
        .clone()
        .attr({
            id: "img" + addcounter
        })
        .insertBefore($('#add'))
        .find("input")
        .attr({
            name: "img" + addcounter
        });
    addcounter++;
});

td {
    width: 100px;
}

input[type='file'] {
    display: none;
}

#img2 {
    color: red;
}

#img3 {
    color: blue;
}

.uploadbutton {
    margin-right: 25px;
    padding: 6px 15px 6px 15px;
    cursor: default;
    color: #000;
    font-size: 15px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<label id="img1" class="uploadbutton">Choose File
    <input type="file" name="img1"/>
</label>

<button id="add">+</button>

<强>更新

在input元素中嵌套label元素还有一个额外的好处，即您可以在子label继承该位置时自由定位父input默认值。

然后input可以相对或绝对地定位在其中，这比试图管理两个独立兄弟姐妹的位置更容易，并且比应用不必要的容器元素更好地实现相同的效果。

在这个例子中你不需要利用这个好处，但我觉得值得说明好的措施。

Answer 3

您根本没有设置input样式，您正在设置label样式，然后只克隆输入。尝试克隆标签。

Answer 4

我认为您可能希望type="file"适应{{1}}