how to load a file locally and display its contents using html javascript without ajax?

Question

i have the following to read a local file and display,

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

but here you can see i have already given the file path as 'txt2.txt', but i don't want to give the file name beforehand, instead i want to load the file and display its contents using input type="file", how to do this without using ajax ?

I don't think you can read a file locally. Really, all you can do is POST a file to a web server. Maybe some sort of HTML5, Flash, or Silverlight component could be used? — Mike Christensen
– Mike Christensen, Commented Sep 25, 2013 at 23:54
You can push the content as part of the web page itself, for example all the elements — Sudipta Chatterjee
– Sudipta Chatterjee, Commented Sep 26, 2013 at 0:00

Nicky Jaidev · Accepted Answer · 2013-11-20 16:27:16Z

The below code will browse a file and copy the content to a 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>

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Reading local files from the browser is not allowed - This is to prevent websites reading files and stealing your information.

Please see the second post (answer) for more information: Javascript, how to read local file?

Being able to read a local file from your browser would be a major breach of security

Most browsers will not let you read local files even if the page originated from your local filesystem.

You can however try the HTML5 file API.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 26, 2013 at 0:08

RobAtStackOverflow

5253 silver badges16 bronze badges

1 Comment

pr3sidentspence Over a year ago

Is that true even if the page is in the same local filesystem?

Collectives™ on Stack Overflow

how to load a file locally and display its contents using html javascript without ajax?

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related