How to read a local file in JQuery or JavaScript?

Question

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.

Assuming by 'local file' you mean one stored on the client machine, then this is not possible. You cannot make an AJAX request to a local file. Try using a FileReader instead, although you're still likely to have browser implementation support problems, inconsistencies and security problems — Rory McCrossan
– Rory McCrossan, Commented Aug 8, 2018 at 13:20
@RoryMcCrossan yes stored on the client machine, but its part of my application only. — Vivek Nuna
– Vivek Nuna, Commented Aug 8, 2018 at 13:24
I have an example to use with XML if you want i can put it here — Alvaro Alves
– Alvaro Alves, Commented Aug 8, 2018 at 13:32

Achyuth Kodali · Accepted Answer · 2018-08-08 13:32:55Z

3

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.

answered Aug 8, 2018 at 13:32

Achyuth Kodali

988 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alvaro Alves · Accepted Answer · 2018-08-08 13:42:28Z

0

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.

answered Aug 8, 2018 at 13:42

Alvaro Alves

3081 gold badge3 silver badges14 bronze badges

4 Comments

Alvaro Alves Over a year ago

This way you can use the drag and drop file too, I use this on a personal project who reads a XML file and take some fields to save on Database

Vivek Nuna Over a year ago

FileReader will ask the user to upload the file? right?

Alvaro Alves Over a year ago

In my example i use an xml on client machine, the client drag this document to #drop_zone and the JS do the job, but the client uploads the document

Vivek Nuna Over a year ago

But I dont want the client to upload or drag/drop the file

Collectives™ on Stack Overflow

How to read a local file in JQuery or JavaScript?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related