克隆 CSS 样式的文件上传按钮

Question

我使用 CSS 设计了 <input type="file"/> 的样式。当我单击 + 按钮时，它将被克隆。然而，这只会在视觉上发生在无样式的上传按钮上。

提示：为了用样式化的按钮替换标准按钮，我设置了 input[type="file"] { display:none }。注释掉这一行，克隆的上传按钮变得可见，但是没有样式。

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

见Fiddle

Answer 1

您根本没有设置 input 的样式，而是设置 label 的样式，然后仅克隆输入。也尝试克隆标签。

Answer 2

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

这克隆了第一个 label，同时确保它与自己的 input:

一起工作

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

Fiddle

Answer 3

重新配置您的 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>

注意：您可以保留 input 上的 id 属性，而只需使用 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>

更新：

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

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

您不需要在此示例中利用该好处，但我觉得值得一提。

Answer 4

我认为您可能希望将 this 改编为 type="file"

克隆 CSS 样式的文件上传按钮

Clone CSS styled file upload buttons

html

css

clone

file

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