How to read a txt from an Open File dialog and load the content in a textarea with javascript (jquery)?

I want to make an "Open File" button to import txt files contents into a textarea.

How can I read the file contents without uploading it to the server?

I want to use javascript开发者_高级运维 (with jquery lib) and I want to do it without refreshing the page.

I used HTML 5 File API. And locally it works perfectly.

+1 for Trusktr.

Ref: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (Slicing a File.)

This is possible with the HTML5 File API.

Use it to get the file from an input element, then use jQuery to append the text to any element you want.

It is really simple to do that with vanila JS and HTML5. First put somewhere HTML tags for textarea and input:

 <textarea id="textareaid" rows="4" cols="50"></textarea>
 <input type="file" id="files" name="files[]" /><output id="list"></output>

Then add bellow code to your JavaScript code, if you have textarea with different id, you need to replace 'textareaid' with id of your textarea. After that, just call uploadAndLoad(); in your code.

function handleFileSelecting(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

        var reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e) {

                var content = e.target.result;
                if (content) {
                    // Inserting content into textarea, change id if you need
                    var textarea = document.getElementById('textareaid');
                    textarea.innerHTML = content;

                }
            };
        })(f);

        reader.readAsText(f);
    }
}

function uploadAndLoad() {
    var filesElem = document.getElementById('files');
    filesElem.addEventListener('change', handleFileSelecting, false);
    filesElem.click();
}

This isn't possible with vanilla javascript, you'd need flash or some other approach to do what you want.

The reasoning is security: to prevent you from reading allMyPasswords.txt :)

You can't.

File open dialog is opened by the browser in response to a FORM submit with an INPUT tag with the FILE type. The file has to be first uploaded to the server.

I think I will do a simple ajax form to upload the file and then get the content with php before deleting the file and printing it, can't think of another solution.

As you say there's no other way than taking the text on the round trip to the server and back. However to ease the pain a bit you can fully automate this:

1. enclose the file-upload input in a form tag of its own and give the form an id
2. add an invisible iframe to your page and give it a name and use the same for the id
3. use the iframes name as the target attribute of the form that holds the file upload
4. bind a function to the file upload's change event to trigger the form's submit. this way as soon as you select your file and the file open dialog closes, the upload process begins

5. as you set the target to the iframe the response from the server will arrive there, so have your php script send back something like the followin:

   echo "<script>window.top.window.file_ready('$file');</script>";

6. write a js function called file_ready which takes the filename as a parameter and updates the value of your textarea by making an ajax call to the server.

Attribution is due. I learned this technique from AJAX file upload tutorial.