Question

我想将输入display: none按钮链接到标签，这样当我点击标签时，它与我的隐藏输入按钮具有相同的行为。我怎么能这样做？

以下是我的HTML5代码：

<label for="model1" class="uploadFile">File...</label>
<input id="model1" type="file" name="model1" class="model1" style="display:none;" th:required="true"  />

Answer 1

如果您希望label在click event上触发input type=file，请使用：

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

我还添加了如何将文件名添加到标签：

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

＆＃13;

$('.uploadFile').click(function() {
  $("#model1").unbind('click').bind('click');
})

$('#model1').change(function() {
 var filename = $(this).val().split('\\').pop();
 $('.uploadFile').text(filename)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="model1" class="uploadFile">File...</label>
   <input id="model1"  type="file"    name="model1" class="model1"
style="display:none;" th:required="true"  />

＆＃13;

Answer 2

你可以使用javascript，并有类似的东西：

<label for="model1" class="uploadFile" onclick="handleClick()">File...</label>

然后定义一个handleclick()函数，该函数将处理您按下按钮时需要执行的操作。

handleclick()可能很简单：

$('#element').click();

或

$('#element').trigger('click');

如何链接输入按钮显示：无行为与标签

2 个答案: