Javascript FileReader()

Question

I want to load another page from another page using javascript filereader(), how do I specify the parameter of the function according to the div ?

html code :

<!DOCTYPE HTML>
<html>
<body>

    <div class='try1' onclick="openFile('test1.txt')">Show Test1</div>
    <div class='try2' onclick="openFile('test2.txt')">Show Test2</div>

    <div id='show_content'></div>

<script>
    var openFile = function(event) {
    var input = event;

    var reader = new FileReader();
        reader.onload = function(){
            var text = reader.result;
            document.getElementById("show_content").innerHTML = (reader.result.substring(0, 200));
        };
    reader.readAsText(input.files[0]);
    };
</script>
</body>
</html>

I want it so that when :

1) I click div class='try1', it will load a file called 'test1.txt' into div id='show_content',

2) and when I click div class='try2', it will load a file called 'test2.txt' into div id='show_content'.

How do I achieve this ? I know I can use jQuery .load() function, but it turns out that jQuery .load() function need a server and uses xmlhttprequest to load, and I need to do this locally. Please if there's any better solution to achieve this, all answers are greatly appreciated. Thx

For security reasons, you should not be able to see any local path of the user with javascript, nor to set it. Your best bet is using XMLHttpRequest, whether on a local server, or with firefox browser which seems to accept it on my machine. — Kaiido, May 22 '15 at 13:04

score 1 · Answer 1 · edited Sep 08 '16 at 20:51

you can put an hidden input in the page and then invoke openFile explicitly;

<div id='try1' onclick="openFile('test.txt')">show try 1</div>
<div id="show_content"></div>
<input type="file" id="fileElem"  accept="text/plain" style="display:none" onchange="openFile(event)">

you only need to add a event listener to your div:

var try1 = document.getElementById("try1"),
fileElem = document.getElementById("fileElem");

try1.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);

and finally:

var openFile = function (event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function () {
        var text = reader.result;
        var content = document.getElementById("show_content");
        content.innerHTML = reader.result.substring(0, 200);
    };
    reader.readAsText(input.files[0]);
};

score -1 · Answer 2 · answered May 22 '15 at 06:59

-1

you can do this with jquery, I have done this locally without any server.

for the 1st one try this:

$(".try1").click(function () {
    $("#show_content").load("text1.txt", function (responseTxt, statusTxt, xhr) {
        if (statusTxt == "success")
        {
            //alert("External content loaded successfully!");
        }

        if (statusTxt == "error")
        {
            //alert("Error: " + xhr.status + ": " + xhr.statusText);
        }
    });
});

and for the second one:

$(".try2").click(function () {
        $("#show_content").load("text2.txt", function (responseTxt, statusTxt, xhr) {
            if (statusTxt == "success")
            {
                //alert("External content loaded successfully!");
            }

            if (statusTxt == "error")
            {
                //alert("Error: " + xhr.status + ": " + xhr.statusText);
            }
        });
    });

answered May 22 '15 at 06:59

Matrix Buster

299
3
9

I copied and paste your exact code and deleted my script, it alerted error :javascript alert Error: 0; NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/HP/Desktop/homepage/text1.txt'. – Charas May 22 '15 at 07:59
Then I tried moving the whole folder to xampp htdocs, as expected, it works fine. What is the reason for this ? I could not find any clue regarding this matter in the internet – Charas May 22 '15 at 08:04
you are right AJAX doesn't support 'file://' you should set up a 'http://' server to host your files. – Matrix Buster May 22 '15 at 08:18
if you want creat a 'http://' server: this would help: http://stackoverflow.com/questions/5050851/best-lightweight-web-server-only-static-content-for-windows – Matrix Buster May 22 '15 at 08:20
yup, thats why im trying to use javascript FileReader api, I managed to read the files using and var input = event.target, then create the filereader() object, but now if I want to use the div as the parameter, how do I achieve this ? – Charas May 22 '15 at 08:25

Javascript FileReader()

2 Answers2