How would i open a text file from a browser and paste/append the text to my contenteditable div?

Question

I am working on to an IDE-like system using contenteditable div, my prof required us to have a feature in which we can open the textfile(local file) and show it to the contenteditable div, how can i do this trick? I've only used js, jquery and html5 and this must work on chrome.

What will i use to fetch the text? Is there a library that will format the text fetch to the contenteditable div? I havent tried anything yet, im overseeing if this is doable sorry guys. The web-based IDE is finish with bugs

SO is not for helping you with your homework, and especially not when you have shown zero effort in attempting it yourself. The real shame here is that I only have 1 downvote to give. — Rory McCrossan, Sep 26 '13 at 09:39
don`t you need something like this http://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript ? — zura, Sep 26 '13 at 09:39

score 2 · Answer 1 · answered Sep 26 '13 at 09:53

2

Using jQuery it's super easy...

$("#my_div").load("text_file.txt");

answered Sep 26 '13 at 09:53

Darren Crabb

570
2
10

is this also usable if the user wanted to browser for a particular text file? – extraRice Sep 26 '13 at 09:55
Ah in that case no. However, isn't there something built into HTML5 that allows that sort of stuff? I'm not using HTML5 yet as I'm still having to support IE6 in most of what I do! – Darren Crabb Sep 26 '13 at 09:57
A 2 second search brings up this ... http://www.html5rocks.com/en/tutorials/file/dndfiles/ – Darren Crabb Sep 26 '13 at 09:59
thanks i dont know the proper keywords hehe – extraRice Sep 26 '13 at 10:01
+1 for the link in the comment, pretty comprehensive overview of file ops in html5. – fvu Sep 26 '13 at 11:09

score 1 · Answer 2 · answered Sep 26 '13 at 09:40

Here is a sample of some code I used ages ago:

if (window.XMLHttpRequest) {
    return new XMLHttpRequest(); //Not IE
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP"); //IE
    } else {
        alert("Your browser doesn't support the XmlHttpRequest object.");

    }
}    

var Req = getXmlHttpRequestObject();

Req.open("GET", "fileName.txt", true);

Req.onreadystatechange = function() {
    if (Req.readyState == 4) {
        var output = Req.responseText;
    }
}

i was thinking OP was talking about local file – A. Wolff Sep 26 '13 at 09:42 — A. Wolff, Sep 26 '13 at 09:42

How would i open a text file from a browser and paste/append the text to my contenteditable div?

2 Answers2