Read & display text file in javascript

Question

The user needs to click on browse button to browse his system .He then selects a text file & clicks ok.Once he clicks ok all the data in the text file should be displayed in a text area.How do I do that? I am using JavaScript & c# designing aspx pages.It would be preferable if i avoid round trip to the server.

Answer 1

For security reasons, JavaScript cannot access the local filesystem like that.

Answer 2

You can't do it without a trip to the server, the only way for you to get the content of the file is by submitting it as part of a form. You can make the trip to the server happen in an iframe via XHR and then update the text area with the result from the XHR call, so it sort of seems like one wasn't involved, but you can't directly access the content of files of the user's machine, for obvious reasons.

Answer 3

I know you said you would prefer a round trip, but its the only way you are going to be able to accomplish what you want.

You could put the file upload in an iframe, and do the upload behind the scenes (No page refresh, gmail does this :) ) then use AJAX to download the data and insert it into the textarea.

Answer 4

Javascript cannot do that without putting a severe security risk on the user. That said, the file will need to be posted to your server.

Answer 5

As other posters here have indicated, you're not allowed to access the local filesystem from Javascript directly. But you can set up an action on your server to take the file form POST input, and simply echo the data right back out to the response. If you hide an iframe inside your page as the form POST target, that response data can appear in the hidden iframe, and then the page won't have to reload. Then once the iframe has loaded with the text, you can use JS to pull the text out of the iframe, and put it into the text area that you're interested in.

Alternately, if you're inclined to restrict usage to Firefox users with an extension, you should be able to accomplish this without a roundtrip using a Greasemonkey user script (see www.greasespot.com) or something like it, that uses the custom Mozilla extensions.

Answer 6

It can't in general be done, as answers here outline.

However, it can be done in Firefox 3+ only, using the uploadfield.files array. Other browsers would have to fall back to the server round-trip.