Question

我正在尝试使用＆＃39; multiple＆＃39;已启用选择多个文本文件，然后将其值（名称）加载到单选按钮。然后选择单选按钮并点击＆＃34; GO＆＃34;它将显示文本文件的内容。

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

另外，有没有办法使用LOCAL文件位置（如C：\ myfile.txt）而不必使用input = file命令进行选择？我想尝试两者。这不是在线使用的，本地文件实际上是加载html的机器上的本地文件，但我理解这部分可能是不可能的。

＆＃13;

<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>

＆＃13;

params = {'zip': args.zip + ',us', 'APPID': args.api}

＆＃13;

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>

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

1 个答案: