HTML5 - JavaScript - 将文本文件加载到单选按钮，然后选择单选按钮的文本文件

Question

我试图使用启用'多个'的文件输入来选择几个文本文件，然后将它们的值（名称）加载到无线电纽扣。然后在选择单选按钮并点击“GO”时，它将显示文本文件的内容。

基本上选择几个文本文件，当选择单选按钮并按下GO时，它会在屏幕上显示内容。我很困难这是我的。请原谅我，因为我猜测我离开了，但我是一个初学者。

此外，有没有办法使用LOCAL文件位置（如C：\ myfile.txt）与必须使用input = file命令进行选择？我想尝试两种。这不是在线使用的，本地文件实际上是在加载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属性，因此一次只能选择一个属性。

你的主要问题是，在你的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>