Question

我有一个HTML文件，我想将其读取并附加为HTML。我尝试了以下代码，但这些代码无法正常工作。

方法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);

方法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);

在方法2中，它没有进入onreadystatechange方法。

我想过另一种方法，我将所有abc.html文件的内容都用作字符串变量，并执行类似的$('#myapp').html(allText);，但这看起来非常糟糕，因为稍后我需要对其他10-15进行相同的操作文件。你们能帮我吗？

注意：我的应用程序以离线模式运行，这意味着我无法使用互联网。

我已经尝试过this解决方案，但是它也不起作用。

Answer 1

这不可能，因为JavaScript是前端框架，并且无法访问本地文件系统。

但是您可以使用其他方法。 ->您可以在本地服务器中提供该文件，并在任何后端框架中使用http请求。

Answer 2

我认为您可以随心所欲地使用这支笔： 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();
            }
        }

您将只处理结果。

如何在JQuery或JavaScript中读取本地文件？

2 个答案: