CODEWITHSUNDEEP
javascriptjqueryhtml
Vivek Nuna
Vivek Nuna

Reputation: 1

How to read a local file in JQuery or JavaScript?

I have an HTML file, which I want to read and append as HTML. I have tried the below codes but these codes are not working.

Approach 1:

var file = "abc.html";

var str = "";
var txtFile = new File(file);
txtFile.open("r");
while (!txtFile.eof) {
    // read each line of text
    str += txtFile.readln() + "\n";
}

$('#myapp').html(str);

Approach 2:

var file = "abc.html";
var rawFile = new XMLHttpRequest();
alert('33333333');
rawFile.open("GET", file, false);
alert('44444');
rawFile.onreadystatechange = function () {
    alert('5555555555');
    if (rawFile.readyState === 4) {
        alert('66666666666');
        alert(rawFile.readyState);

        if (rawFile.status === 200 || rawFile.status == 0) {
            var allText = rawFile.responseText;
            $('#myapp').html(allText);
            alert(allText);
        }
    }
}
rawFile.send(null);

In Approach 2, it not going into the onreadystatechange method.

I thought another approach that I will use all the abc.html file content as a string variable and do similar $('#myapp').html(allText);, but this looks very bad approach because later I need to do the same for other 10-15 files. So Could you guys help me out?

Note: My application is running in offline mode means I cannot use the internet.

I have tried this solution, but its also not working.

Upvotes: 3

Views: 477

Answers (2)

Alvaro Alves
Alvaro Alves

Reputation: 308

I think you can adapt this pen to use as you wish: https://codepen.io/alvaro-alves/pen/wxQwmg?editors=1111

CSS: 

#drop_zone {
        width:  100px;
        height: 100px;
        background: #000;
        background-repeat: no-repeat;
        background-size: 100px 100px;
        opacity: 0.5;
        border: 1px #000 dashed;
    }

HTML:

   <html>
  <body>
    <div id="drop_zone"   ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">

            </div>
  </body>
</html>

JS:

//drop handler do XML
        function dropHandler(ev) {
            ev.preventDefault();

            var file, reader, parsed, emit, x, endereco;

            if (ev.dataTransfer.items) {
                for (var i = 0; i < ev.dataTransfer.items.length; i++) {
                    if (ev.dataTransfer.items[i].kind === 'file') {
                        file = ev.dataTransfer.items[i].getAsFile();
                        reader = new FileReader();
                        reader.onload = function() {
                            parsed = new DOMParser().parseFromString(this.result, "text/xml");
                            console.log(parsed);
                        };
                        reader.readAsText(file);
                        console.log('... file[' + i + '].name = ' + file.name);
                    }
                }
            } 

            removeDragData(ev)
        }

        function dragOverHandler(ev) {
          ev.preventDefault();
        }

        function removeDragData(ev) {
            if (ev.dataTransfer.items) {
                ev.dataTransfer.items.clear();
            } else {
                ev.dataTransfer.clearData();
            }
        }

You will just to handle the result.

Upvotes: 0

Achyuth Kodali
Achyuth Kodali

Reputation: 98

It is not possible as JavaScript is frontend framework and it doesn't have access to local file system.

But you can do diffrent method. -> you can serve that file in a local server and use http request with any backend framework.

Upvotes: 3

Related Questions