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>