ラジオボタンで入力ファイルの「受け入れる」値を変更する方法

Question

シナリオは、アップロードする必要があるファイルの種類を選択する必要があることです。ファイルタイプ（たとえばXML）を選択すると、ファイルアップロードダイアログボックスが開き、選択したファイルのタイプがXMLにのみフィルタリングされます。ラジオボタンの他​​のオプションも同じです。ラジオボタンで選択した値をファイルアップロードの「受け入れる」プロパティに配置する必要があります。これを達成する方法はありますか？ここ

<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

HTMLコードは、ラジオボタンで.change()イベントを使用して、後の入力の値を設定します。 「受け入れる」の値を設定するには.attr()

あなたが複数のパラメータを選択する場合は

$('.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>

.attr("accept", "." + $(this).val())のように、あなたは、チェックボックスではなくラジオを使用する必要があります。

$('.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>

Answer 2

あなたは同じダイアログで複数のファイルを受け入れるために、どのように例えば

については

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