How to read txt from the Open File dialog box and load content into a text box using javascript (jquery)?

Question

I want to create an open file button to import the contents of txt files into a text box.

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

I want to use javascript (with jquery lib) and I want to do this without refreshing the page.

Answer 1

I used the HTML 5 file API and it works fine locally.

+1 for Trusktr.

Link: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (file slicing.)

Answer 2

HTML5 File API.

, , jQuery , .

Answer 3

javascript , - , , .

- : allMyPasswords.txt:)

Answer 4

.

FORM INPUT FILE . .

Answer 5

, ajax, , php , .

Answer 6

, , . , , :

• id
• iframe id
• iframes target ,
• , submit. , , , .

• iframe, , php script - :

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

• js, file_ready, , ajax .

. AJAX.

Answer 7

Vanila JS HTML5. - HTML- textarea :

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

JavaScript, textarea id, 'textareaid' id textarea. uploadAndLoad(); .

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();
}