-1

I have the following code. In that I am displaying normal text. In place of that I want to

load a local text file.

I am not able to load a local text file.

Here, I want to load the content of a.txt file from my home folder in the textarea on selection of option a. And so on.

<html>
<body>

<div class="left">
File Display
<p>

<select class="x" onchange="showfile(this);"> 

<option selected="selected" value="" id="Templates">Please select an option</option>

<option>a</option>

<option>b</option>

<option>c</option>

<option>d</option>

</select>

</p>

<p>

<textarea cols="30" rows="20" readonly="readonly" id="textar">

</textarea>

</p>

</div>

<script>

function showfile(sel){   

files =[ "", 

/*option a*/                 

"display file a.txt ",

/*option b*/                

" display file b.txt ",

/*option c*/                 

" display file c.txt",

/*option d*/                 

"display file d.txt", ];

                   srcfile = files    [sel.selectedIndex];    

   if (srcfile != undefined && srcfile != "") {      

                  document.getElementById('textar').innerHTML= srcfile;   

 } 

}

</script>

</body>
</html>
user1862399
  • 217
  • 2
  • 5
  • 14
  • 1
    If I understood your question correctly, Javascript does not allow the use of file access on local system due to security reasons. Please read this answer: http://stackoverflow.com/a/372333/1155208 – ninty9notout Feb 27 '14 at 15:19
  • you need j Query Ajax (Client side Script) and PHP (Server side script). j Query Ajax which will request to fetch all the data through PHP. In PHP file you need to write file operation code to open file,read and show the content. – Naresh Feb 27 '14 at 15:28
  • Can it be done in django, python? – user1862399 Feb 27 '14 at 15:39
  • @user1862399 I updated my answer with a working sample (this I tested my self) – Asons Feb 27 '14 at 16:02

1 Answers1

3

UPDATE

Use FileReader API:

Source:

HTML

<div id="page-wrapper">

    <h1>Text File Reader</h1>
    <div>
        Select a text file: 
        <input type="file" id="fileInput">
    </div>
    <pre id="fileDisplayArea"><pre>

</div>

JS

window.onload = function() {
    var fileInput = document.getElementById('fileInput');
    var fileDisplayArea = document.getElementById('fileDisplayArea');

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = /text.*/;

        if (file.type.match(textType)) {
            var reader = new FileReader();

            reader.onload = function(e) {
                fileDisplayArea.innerText = reader.result;
            }

            reader.readAsText(file);    
        } else {
            fileDisplayArea.innerText = "File not supported!"
        }
    });
}
Asons
  • 84,923
  • 12
  • 110
  • 165
  • You can make an AJAX request to the client's local file system? Doesn't that break the security rules built in to JavaScript? – Jay Blanchard Feb 27 '14 at 15:32
  • @ScorpionRulz Try change this line: `rawFile.open("GET", file, true);` to `rawFile.open("GET", file, false);` – Asons Feb 27 '14 at 15:34
  • @JayBlanchard According to the source it works. The thing is you need to know the path in advance, you can't query that. – Asons Feb 27 '14 at 15:37
  • I'll have to test this today, it is an interesting approach. But it would seem a huge security issue. – Jay Blanchard Feb 27 '14 at 15:38
  • @JayBlanchard check this post, http://stackoverflow.com/questions/22031719/read-csv-file-with-javascript-into-a-key-value-pair-array/22033170#22033170, it has a few more ways you can test – Asons Feb 27 '14 at 15:40
  • This only works, if the page itself is also local. If not, it throws `NETWORK_ERR: XMLHttpRequest Exception 101` – zord Feb 27 '14 at 15:44
  • @zord .. That can be it, so I updated my answer with a working (self tested) variant. – Asons Feb 27 '14 at 16:00