将.txt文件加载到网页中

Question

我试图让用户单击“加载文件”按钮以选择网页文件。 但是我似乎无法获得实际的文件，只是名称和上次修改时间。 我需要在该文件上运行一些JS代码，所以我只需要实际的文本。 我不需要将其放在网页中，但是我只是认为那是显示它的好方法。 这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body onclick="update_loc(event)"">
  <center><canvas width="400" height="400" id="myCanvas" style="border: 1px solid; border-color: #000000"></canvas></center>
  <script src="./js.js"></script>
  <input type="file" id="myFile">
  <p id="output">YO</p>
</body>
</html>

而我的JS：

var reader;
var file;
setTimeout(test_file, 500);
function test_file() {
  setTimeout(test_file, 500);
  file = document.getElementById("myFile").files[0];
  console.log(document.getElementById("myFile").files);
  reader = new FileReader();
  reader.onload = function (e) {
    var textArea = document.getElementById("output");
    textArea.value = e.target.result;
  };
  reader.readAsText(file);
}

我不知道如何复制和粘贴Chrome日志，但是我只是在“ FileList”对象中获得了文件名和时间。

Answer 1

尝试这个：

<input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>

    <script>
      function handleFileSelect(evt) {
        var files = evt.target.files; // FileList object

        // files is a FileList of File objects. List some properties.
        var output = [];
        for (var i = 0, f; f = files[i]; i++) {
          output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                      f.size, ' bytes, last modified: ',
                      f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                      '</li>');
        }
        document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
      }

      document.getElementById('files').addEventListener('change', handleFileSelect, false);
    </script>

有关如何读取和操作这些文件的更多信息（在本示例中为多个文件），请检查此URL

将.txt文件加载到网页中

问题描述

1 个解决方案

解决方案1
0 2017-06-15 20:59:25

将.txt文件加载到网页中

问题描述

1 个解决方案

解决方案1 0 2017-06-15 20:59:25

解决方案1
0 2017-06-15 20:59:25