Question

我有以下内容来阅读本地文件和显示，

       <html>
       <head>
       <script> 
             function readfile() {
        document.getElementById('iframe').contentDocument.body.firstChild.innerHTML;
  }
     </script>
         </head>
        <body>
     <iframe id='iframe' src='txt2.txt' onload='readfile()'> </iframe>
     <input type="file" id="fileinput" />  
     </body>
    </html>

但在这里您可以看到我已经将文件路径指定为'txt2.txt'，但我不想事先给出文件名，而是我想加载文件并使用输入类型=显示其内容“文件”，如何在不使用ajax的情况下执行此操作？

Answer 1

以下代码将浏览文件并将内容复制到textarea：

   <input type="file" id="fileinput" />
    <script type="text/javascript">
      function readSingleFile(evt) {
        //Retrieve the first (and only!) File from the FileList object
        var f = evt.target.files[0]; 

        if (f) {
          var r = new FileReader();
          r.onload = function(e) { 
              var contents = e.target.result;
            alert( "Got the file.\n" 
                  +"name: " + f.name + "\n"
                  +"type: " + f.type + "\n"
                  +"size: " + f.size + " bytes\n"
                  + "starts with: " + contents.substr(1, contents.indexOf("\n"))
            );  
            document.getElementById('area').value=  contents;
          }
          r.readAsText(f);

        } else { 
          alert("Failed to load file");
        }
      }

      document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
    </script>

    <textarea rows=20 id="area"></textarea>

Answer 2

不允许从浏览器中读取本地文件 - 这是为了防止网站读取文件和窃取您的信息。

请参阅第二篇文章（答案）以获取更多信息： Javascript, how to read local file?

能够从浏览器中读取本地文件将是一个严重的安全漏洞

即使页面来自本地文件系统，大多数浏览器也不允许您读取本地文件。

但您可以尝试HTML5 file API。

如何在本地加载文件并使用没有ajax的html javascript显示其内容？

2 个答案: