4

I have an input type="file" button. After I choose a file, I have to read the contents of the file using javascript. Is it possible to read/get contents of a chosen file using javascript or ajax?

aksu
  • 5,221
  • 5
  • 24
  • 39
Sangam254
  • 3,415
  • 11
  • 33
  • 43

8 Answers8

9

You are all wrong in a way. It is possible. With the new File API you can read files before submitting them to the server. It is not available in all browsers yet though.

Check this example. Try to open a text file for example.

http://development.zeta-two.com/stable/file-api/file.html

Edit: Even though the question states "uploaded file" I interpret it as, "a file to be uploaded". Otherwise it doesn't make sense at all.

Zeta Two
  • 1,776
  • 1
  • 18
  • 37
  • +1 - If server side is brought into play, then it is a trivial solution, but the File API does solve the problem although availability is still a problem. – Anurag Mar 29 '11 at 07:54
  • 1
    +1 - Look here for another tutorial: http://www.html5rocks.com/en/tutorials/file/dndfiles/ – james.garriss Dec 02 '11 at 13:46
7

With AJAX its possible to read uploaded file but with pure javascript its not possible because javascript works on client side not on sever side.

if you are going to use jquery than Ajax call may be like this

$.ajax({
  url: "test.html",
  context: document.body,
  success: function(){
    $(this).addClass("done");
  }
});
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
  • I am using prototype ajax. Is it possible to get the contents of the chosen(input type="file") file before sending/posting it to server? – Sangam254 Mar 29 '11 at 09:00
  • I am supposed to decrypt the content in the file using a javascript decryption function. So I need the content in the chosen file. – Sangam254 Mar 29 '11 at 09:02
3

Reading files client side is hard:

How to read and write into file using JavaScript

Read a local file

Local file access with javascript

Unless you are trying to do it with local javascript:

Access Local Files with Local Javascript

Or server side javascript:

http://en.wikipedia.org/wiki/Server-side_JavaScript

Alternatively you can force your user to install an ActiveX object:

http://4umi.com/web/javascript/fileread.php

Community
  • 1
  • 1
yzxben
  • 862
  • 6
  • 11
0

you cant do it using javascript directly. You can post the file to the server an then use ajax to retrieve the content.

DoXicK
  • 4,784
  • 24
  • 22
0

Javascript is designed not to have access to the computer it is running on. This is so that rogue javascript can't read the user's harddrive. You could look into using iframes though.

Jess
  • 8,628
  • 6
  • 49
  • 67
0

It is not possible to do it in java script. See Local file access with javascript

I agree with DoXicK above. You can post the file first on server and then you can use Ajax to read it.

Community
  • 1
  • 1
ajm
  • 12,863
  • 58
  • 163
  • 234
0

That is not entirely impossible

A browser's usually runs Javascript(JavaScript Engine) in a sandboxed environment.

So you can use Windows Scripting Host or Internet Explorer in a trusted environment and use the FileSystemObject

or use

Or upload a file to your server and use the XMLHttpRequest object.(in other words - Ajax)

Robin Maben
  • 22,194
  • 16
  • 64
  • 99
0

For IE use the FileSystemObject (which is found on all Windows systems).

For Firefox:

var file = Components.classes["@mozilla.org/file/local;1"].
       createInstance(Components.interfaces.nsILocalFile);
file.initWithPath("/home");

See https://developer.mozilla.org/en/Code_snippets/File_I%2F%2FO

To see these methods and others in use, look at TiddlyWiki app to see how it does it across all major browsers.

Lindsay Morsillo
  • 530
  • 6
  • 19