0

What I need to do is:

  • Let user choose txt file from his disc

  • Get the text from it to let's say a variable

  • Send it (the variable value) via AJAX

For the first point I want to know if I should use normal input type (like if I would like to send file via POST) <input type="file">

For the second point I need to know how to get the name of the file user selected and then read text from it. Also I'm not good with javascript so I don't really know how long can a string be there (file will have about 15k lines on average)

For the third I need nothing to know if I can have the data stored in a variable or an array.

Thanks in advance.

P.S. I guess javascript is not a fast language, but (depending on the editor) it sometimes opens on my computer the way that I have all the needed data in first 5 or 6 lines. Is it possible to read only first few lines from the file?

Varun
  • 870
  • 2
  • 10
  • 27
Fiodor
  • 796
  • 2
  • 7
  • 18
  • 1
    HTML5 Rocks has a tutorial on reading files from disk (http://www.html5rocks.com/en/tutorials/file/dndfiles/). – Whymarrh Feb 23 '14 at 20:14
  • 1
    re: ps: sure, just pass a "file.slice(0, 1024)" call to FileReader() instead of just "file" to grab the first KB of the file without reading the whole thing into RAM. – dandavis Feb 23 '14 at 20:15
  • also, file.name, from the same file you give to FileReader() has the name of the file... – dandavis Feb 23 '14 at 20:28

2 Answers2

0

It is possible to get what you want using the File API as @dandavis and other commentors have mentioned (and linked), but there are some things to consider about that solution, namely browser support. Bottom line is the File API is currently a working draft of the w3c. And bottom line is even w3c recommended things aren't always fully supported by all browsers.

What solution is "best" for you really boils down to what browser/versions you want to support. If it were my own personal project or for a "modern" site/audience, I would use the File API. But if this is for something that requires maximum browser support (for older browsers), I would not currently recommend using the File API.

So having said all that, here is a suggested solution that does NOT involve using the FIle API.

  • supply an input type file in a form for the user to specify file. User will have to select the file (javascript cannot do this)
  • use form.submit() or set the target attribute to submit the form. There is an iframe trick for submitting a form without refreshing the page.
  • use server-side language of choice to respond with the file info (name, contents, etc.). For example in php you'd access the posted file with $_FILES
  • then you can use javascript to parse the response. Normally you'd send it as a json encoded response. Then you can do whatever you want with the file info in javascript.
CrayonViolent
  • 32,111
  • 5
  • 56
  • 79
  • I would argue that your first point isn't 100% correct. (http://www.html5rocks.com/en/tutorials/file/dndfiles/) – Whymarrh Feb 23 '14 at 20:14
  • I would have to access the file in javascript to send it via $.post, wouldn't I? – Fiodor Feb 23 '14 at 20:16
  • it's funny that you say you have to use ajax but that JS can't get the file contents to pass as a string to ajax... – dandavis Feb 23 '14 at 20:17
  • html5 spec can access it, yes. However, *the user must specify a file*, js *cannot* just go looking for files on a user's computer without user interaction. 2nd, *outside* of html5 spec, js does not have access to the contents of a file. – CrayonViolent Feb 23 '14 at 20:20
  • ok, but can you explain what you mean by "use ajax to submit the form"? ajax takes string arguments, unless your're talking about "html5" xhr.send(input) or xhr.send(form). Also, FileReader is defined in webapi, not html5:http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface – dandavis Feb 23 '14 at 20:22
  • Also, the file api is a *working draft*, not a standard. You should consider this, as well as browser support: http://caniuse.com/#feat=fileapi – CrayonViolent Feb 23 '14 at 20:25
  • nevermind, just change "use ajax" to "use form.submit()" and we can both be correct and happy. – dandavis Feb 23 '14 at 20:26
  • Fine, done. My overall point is that frankly, IMO, the file api is not something i'd use as a solution at this time. – CrayonViolent Feb 23 '14 at 20:28
  • form.submit() is going to refresh the page, isn't it? I really don't want to do this. I guess I will just read the tutorial mentioned in the first comment. But thank you both anyway ;). – Fiodor Feb 23 '14 at 20:28
  • 1
    @Fiodor it is possible to submit the file without refreshing the page, *even with ajax* (using the file api), depending on what your browser support needs are. There's also an `iframe` trick for even more browser support. http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload for more details. Which solution (including the file api solution) is "best" for you really boils down to what browser/versions you want to support. – CrayonViolent Feb 23 '14 at 20:32
  • @Fiodor I have made significant edits to my answer, based on discussion – CrayonViolent Feb 23 '14 at 21:06
0

With Chrome and Firefox you can read the contents of a text file like this:

HTML: 

<input type="file" id="in-file" />

JavaScript with jQuery:

var fileInput = $('#in-file');

fileInput.change(function(e) {
    var reader = new FileReader();
    reader.onload = function(e) {
        console.log(reader.result);
    }
    reader.readAsText(fileInput[0].files[0]);   
});

IE doesn't support the FileReader object.

chessweb
  • 4,613
  • 5
  • 27
  • 32