StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What you're looking for is <em>File API</em> introduced in HTML5 (<a href="http://www.w3.org/TR/FileAPI/" rel="nofollow">working draft</a>).</p> <p>The examples in <a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" rel="nofollow">this article</a> will point you in the right direction. Remember that the end user will have to initiate the action and manually select the files - otherwise it would have been a terrible idea privacy- and security-wise.</p> <p><strong>Update:</strong></p> <p>I found (yet again) the <a href="https://developer.mozilla.org/en-US/docs/DOM/FileReader" rel="nofollow">mozilla docos</a> to be more readable! Quick html mockup:</p> <pre><code><input type="file" id="files" name="files[]" onchange="loadTextFile();" multiple/> <button id="test"onclick="test();">What have we read?</button> </code></pre> <p>...and the JavaScript:</p> <pre><code>var testArray = []; //your array function loadTextFile() { //this would be tidier with jQuery, but whatever var _filesContainer = document.getElementById("files"); //check how many files have been selected and iterate over them var _filesCount = _filesContainer.files.length; for (var i = 0; i < _filesCount; i++) { //create new FileReader instance; I have to read more into it //but I was unable to just recycle one var oFReader = new FileReader(); //when the file has been "read" by the FileReader locally //log its contents and push them into an array oFReader.onload = function(oFREvent) { console.log(oFREvent.target.result); testArray.push(oFREvent.target.result); }; //actually initiate the read oFReader.readAsText(_filesContainer.files[i]); } } //sanity check function test() { for (var i = 0; i < testArray.length; i++) { console.warn(testArray[i]); } } </code></pre> <p><a href="http://jsfiddle.net/ovfiddle/84Ptt/" rel="nofollow">Fiddled</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload