How to access and read a file from client-side?

Question

I have a file foo.txt with the following rows:

row1
row2
row3

I would like to create a link to this file in my HTML and to read it with Javascript on client-side. Is there a solution for this?

Yes, it's called ajax and uses a serverside language to read the file on your server. You don't have access to the servers or the users filesystem directly in javascript. — adeneo, May 27 '12 at 18:23

Fluidbyte · Accepted Answer · 2012-05-27T18:41:42.667

4

if the file is on your server you can use the following:

jQuery.get('your_file.txt',function(data){
  alert(data);
});

If you want to pull in from your local system you'll need an upload mechanism in place first.

Update:

Do it synchronously:

$.ajax({
    url: "your_file.txt",
    async: false,
    success: function(data){ alert(data); }
});

edited May 27 '12 at 18:41

answered May 27 '12 at 18:24

Fluidbyte

5,162
9
47
76

Thank you, @Fluidbyte, if I understand your answer correctly, if I have a file at server-side I can download it and read it on client side with this kind of ajax call. Is there a synchronous solution as well? – Lajos Arpad May 27 '12 at 18:35
I added an update to the code - just need to use .ajax() and specify asynch false. – Fluidbyte May 27 '12 at 18:42
Yes, I've seen it, Fluidbyte, I'm going to test this soon and if this idea is sound I will upvote and accept your answer. – Lajos Arpad May 27 '12 at 18:48
this works like a charm, thank you. I upvoted you and I accept your answer. Thank you again. – Lajos Arpad May 28 '12 at 19:09

Sarfraz · Answer 2 · 2012-05-27T18:33:16.380

3

File Not on your own server:

That is not possible with client-side JavaScript due to security reasons. Imagine you are trying to access the file system of the client.

Though there is option of File System Object in Internet Explorer but yet it is generally not a good idea to do I/O on client machine unless there is no purpose to harm it.

File on your server:

If however you meant to read a file from your own domain/space, you can use AJAX as @Fluidbyte pointed out.

You can also use File API of html5 in browsers that support it.

edited May 27 '12 at 18:33

answered May 27 '12 at 18:23

Sarfraz

377,238
77
533
578

Thank you for your answer. So the only possibility is to send out the content of the file from the server to the client? – Lajos Arpad May 27 '12 at 18:24
2

You can also use html5 file API to read files on a client's computer, if he drags&drops them, selects them in file input, or if they are contained under a directory selected with chrome's webkitdirectory file input. You can then modify those files and prompt for a download to save as new file. – Esailija May 27 '12 at 18:28
I want to have files which contain some semantic information about the web-page which can be downloaded and read by the client. – Lajos Arpad May 27 '12 at 18:33
Good ideas, I upvote this answer as well. – Lajos Arpad May 28 '12 at 19:09

score 3 · Answer 3 · answered May 27 '12 at 18:29

3

You could use the File API for supported browsers.

If not, use the traditional "upload to server and read from server" approach. This can be done in AJAX as well.

answered May 27 '12 at 18:29

Joseph

117,725
30
181
234

score 1 · Answer 4 · answered May 27 '12 at 18:55

I would suggest you store the file in HTML5 Localstorage in the Clients browser since it is rows you could save it in a simple loop as

localStorage.setItem("key1", "value1");  
localStorage["key1"] = "value1";
...

write a serversided script that reads it line by line and outputs javascript code.

then later to read it you simply need to :

function listAllItems(){  
    for (i=0; i<=localStorage.length-1; i++)  
    {  
        key = localStorage.key(i);  
        val = localStorage.getItem(key);  
    }   
}

Each website usually gets 5MB of Localstorage space. You can write a function to update the Localstorage append something to it and send it back to the server if needed, etc.

Yes, this is a feasible idea, I upvote this answer as well. – Lajos Arpad May 28 '12 at 19:11 — Lajos Arpad, May 28 '12 at 19:11

score 0 · Answer 5 · answered Mar 03 '16 at 09:56

            var oFReader = new FileReader();
            oFReader.readAsText(document.getElementById("fileImportOrExport").files[0]);
            oFReader.onload = function (oFREvent) {
                var fileImportOrExportContent = oFREvent.target.result;
            }
            oFReader.onerror = function (OFREvent) {
                alert("Error in reading");
            }

How to access and read a file from client-side?

5 Answers5