Question

我试图让用户点击＆＃34;加载文件＆＃34;按钮为网页选择文件。但我似乎无法获得实际文件，只是名称以及上次修改时间。我需要在该文件上运行一些JS代码，所以我只需要实际的文本。我不需要把它放在网页上，但我只是觉得这是展示它的好方法。这是我的HTML：

class CustomUserProvider implements UserProvider
{
    public function retrieveById($identifier)
    {
        try {
            return Socialite::driver('custom-oauth')->userFromToken($identifier);
        } catch (AuthenticationException $e) {
            return null;
        }
    }
}

我的JS：

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

我无法弄清楚如何复制和粘贴chrome日志，但我只是在＆＃34; FileList＆＃34;中得到了文件名和时间。对象

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 个答案: