如何在单选按钮上单击更改输入文件的"接受"值

Question

方案是我需要选择我需要上传的文件类型.选择文件类型(例如XML)后,将打开文件上载对话框并过滤所选文件的类型XML.同样适用于单选按钮中的其他选项.我需要将单选按钮中选择的值放在文件上传的"accept"属性中.有没有办法实现这个目标？

HTML代码在这里

<input type="radio" class="selectfileclass" name="file" id="xml" value="xml" />XML<br />
<input type="radio" class="selectfileclass" name="file" id="html" value="html" />HTML<br />
<input type="radio" class="selectfileclass" name="file" id="json" value="json" />JSON<br />

<span class="btn btn-default btn-file btn-primary">Browse<input type="file" id="ImportFile" accept=".xml" data-bind="event: { change: $root.Browse }"></span>

Answer 1

.change()在单选按钮上使用 事件,然后设置输入值.设置"接受"使用的值.attr()就像.attr("accept", "." + $(this).val())

$('.selectfileclass').change(function() {
  $('#ImportFile').attr("accept", "." + $(this).val())
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="selectfileclass" name="file" id="xml" value="xml" />XML<br />
<input type="radio" class="selectfileclass" name="file" id="html" value="html" />HTML<br />
<input type="radio" class="selectfileclass" name="file" id="json" value="json" />JSON<br />

<span class="btn btn-default btn-file btn-primary">Browse<input type="file" id="ImportFile" accept=".xml" data-bind="event: { change: $root.Browse }"></span>

如果要选择多个参数,则必须使用复选框而不是无线电.

$('.selectfileclass').click(function() {
  var s = $('.selectfileclass:checked').map(function() {
    return $(this).val()
  }).get().join(",.")
  console.log(s)
  $('#ImportFile').attr("accept", "." + s)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="selectfileclass" name="file" id="xml" value="xml" />XML<br />
<input type="checkbox" class="selectfileclass" name="file" id="html" value="html" />HTML<br />
<input type="checkbox" class="selectfileclass" name="file" id="json" value="json" />JSON<br />

<span class="btn btn-default btn-file btn-primary">Browse<input type="file" id="ImportFile" accept=".xml" data-bind="event: { change: $root.Browse }"></span>