Question

我的标签为=＆＃34; #input_id＆＃34;标签如下图所示。但是，多个标签会触发相同的输入字段（带有id）以附加用户选择的文件。我想现在哪个标签触发了输入字段。

<label id="label1" for="input1">Document1</label>
<label id="label2" for="input1">Document2</label>
<label id="label3" for="input1">Document3</label>
<label id="label4" for="input1">Document4</label>

<input type="file" id="input1" accept="application/pdf" />

$("#input1").change(function() {
//some js for checking file type and file size etc
//looking for some code to findout which label clicked to trigger file input 

});

当我点击标签时，它会触发输入字段但是我需要知道点击了哪个标签，通过使用data-fpath =＆＃34;某些路径＆＃34;来保存文件路径到合适的div。

我使用jquery但是任何javascript解决方案都适合我。

Answer 1

请查看以下工作片段：

$("label").on('click',function(){
  $("label").removeClass('clicked');
  $(this).addClass('clicked');
});
$("#input1").change(function() {
  //some js for checking file type and file size etc
  //looking for some code to findout which label clicked to trigger file input 
  if($(".clicked").length>0){
    alert('Label with id : '+$(".clicked").attr('id')+' clicked to trigger file uploader.');
  }else{
    alert("No label has been clicked trigger file uploader.");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="label1" for="input1">Document1</label>
<label id="label2" for="input1">Document2</label>
<label id="label3" for="input1">Document3</label>
<label id="label4" for="input1">Document4</label>

<input type="file" id="input1" accept="application/pdf" />

单击标记时检测标签ID

1 个答案: