3

我有以下内容可以读取本地文件并显示，

       <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”，但我不想事先提供文件名，而是想加载文件并使用 input type="file" 显示其内容，如何在不使用 ajax 的情况下做到这一点？

4

2 回答 2

7

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

   <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>
于 2013-11-20T16:27:16.903 回答
1

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

更多信息请看第二篇文章（答案）： Javascript，如何读取本地文件？

能够从浏览器读取本地文件将是对安全性的重大破坏

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

但是，您可以尝试HTML5 文件 API。

于 2013-09-26T00:08:37.813 回答