テキストファイルをラジオボタンに読み込んでからラジオボタンを選択してテキストファイルを読み込む

Question

複数のテキストファイルを選択してラジオにロードするには、複数のファイルを有効にしてファイル入力を使用しようとしています。ボタン。その後、ラジオボタンを選択して "GO"を押すと、テキストファイルの内容が表示されます。

基本的にいくつかのテキストファイルが選択されます。ラジオボタンが選択され、GOが押されると、内容が画面に表示されます。私は非常に立ち往生していますここに私が持っているものです。私は私が途方に暮れていると思いますが、私は初心者ですので、私を許してください。

また、input = fileコマンドで選択するのではなく、ローカルファイルの場所（C：\ myfile.txtなど）を使用する方法がありますか？私は両方を試してみたい。これはオンラインでは使用されません。ローカルファイルは実際にはHTMLがロードされているマシン上のローカルファイルですが、この部分は不可能かもしれないことを理解しています。

updateList = function() { 
 
    var input = document.getElementById('file'); 
 
    var output = document.getElementById('fileList'); 
 

 

 
    for (var i = 0; i < input.files.length; ++i) { 
 
    output.innerHTML += '<input type="radio" value="' + input.files.item(i).name + '" id="place">'; 
 
    } 
 

 
} 
 

 

 

 
function Go() { 
 
    var fileInput = document.getElementById('place'); 
 
    var fileDisplayArea = document.getElementById('fileDisplayArea'); 
 

 
    fileInput.addEventListener('change', function(e) { 
 
    var file = fileInput.files[0]; 
 
    var textType = /text.*/; 
 

 
    if (file.type.match(textType)) { 
 
     var reader = new FileReader(); 
 

 
     reader.onload = function(e) { 
 
     fileDisplayArea.innerText = reader.result; 
 
     } 
 

 
     reader.readAsText(file); 
 
    } else { 
 
     fileDisplayArea.innerText = "File not supported!" 
 
    } 
 
    }); 
 
}

<input type="file" name="file" id="file" multiple onchange="updateList();" /> 
 
<br/>Selected files: 
 

 
<div id="fileDisplayArea"></div> 
 
<div id="fileList"></div> 
 
<button id="button" onclick="Go();">GO</button>

Answer 1

私は、わかりやすくするためにいくつかの変更を加えました。私はインラインのjavascriptを取り除き、その代わりにイベントリスナーを使用しました。各ラジオボタンの値をそのインデックスに変更したので、ファイルリストを調べて選択されたラジオボタンを見つけるときに使用することができました。複数の要素で同じIDを使用しないでください。ラジオボタンからIDを削除しました。ファイル名を示すラベルを各入力に追加しました。ラジオボタンにname属性を設定して、一度に1つだけが選択されるようにします。

あなたの主な問題は、あなたのGo機能であなたがfileInput変数などの無線入力を使用していたし、あなたがボタンのクリックでGo関数を呼び出したので、意味がありませんでしたそれらのラジオ入力に変更イベントを設定したことでした。

私が知る限り、セキュリティのためにローカルパスを使用することはできません。あなたが明示的にファイルを選択することなく、JavaScriptがあなたのコンピュータからのピックアップファイルだけである場合を想像してみてください。

document.getElementById("file").addEventListener("change", function(e) { 
 
    // this refers to the input. could also use e.target; 
 
    var input = this; 
 
    var output = document.getElementById("fileList"); 
 

 
    // just using the index for the value of each radio button 
 
    for (var i = 0; i < input.files.length; ++i) { 
 
    output.innerHTML += 
 
     '<label><input type="radio" value="' + i + '" class="place" name="files">' + input.files.item(i).name + 
 
     "</label><br/>"; 
 
    } 
 
}); 
 

 
document.getElementById("button").addEventListener("click", function(e) { 
 
    var textType = /text.*/; 
 
    var fileInput = document.getElementById("file"); 
 
    var fileDisplayArea = document.getElementById("fileDisplayArea"); 
 
    
 
    // here we're finding the checked radio button and getting its value 
 
    // to use below as the index in our file list 
 
    var selectedRadioIndex = parseInt(
 
    document.querySelector('input[name="files"]:checked').value 
 
); 
 

 
    if (fileInput.files[selectedRadioIndex].type.match(textType)) { 
 
    var reader = new FileReader(); 
 

 
    reader.onload = function(e) { 
 
     fileDisplayArea.innerText = reader.result; 
 
    }; 
 

 
    reader.readAsText(fileInput.files[selectedRadioIndex]); 
 
    } else { 
 
    fileDisplayArea.innerText = 
 
     fileInput.files[selectedRadioIndex].name + " is not supported!"; 
 
    } 
 
});

<input type="file" name="file" id="file" multiple/> 
 
<br/>Selected files: 
 

 
<div id="fileDisplayArea"></div><div id="fileList"></div> 
 
<button id="button">GO</button>