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

克隆CSS样式文件上传按钮

4 个答案:

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