2017-06-01 56 views
2

该场景是我需要选择需要上传哪种类型的文件。选择文件类型后(例如XML),文件上传对话框将打开并仅将所选文件的类型过滤为XML。与单选按钮中的其他选项一样。我需要将单选按钮中选定的值置于文件上传的“接受”属性中。有没有办法做到这一点?如何更改单选按钮上的输入文件的“接受”值点击

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> 

回答

6

代码中使用的单选按钮.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>

+0

如何接受在同一对话框多个文件? –

+0

@AnantWaykar看看第二个片段 –

0

你可以尝试直播活动,对于E.g

$('input[type="radio"]').on('change',function() { 
    $('#ImportFile').attr("accept", "." + $(this).val()) 
    console.log($(this).val()); 
});