代码之家 › 专栏 › 技术社区 › Vivek Nuna Chetan sabhaya

如何在jquery或javascript中读取本地文件?

html jquery javascript

Vivek Nuna Chetan sabhaya · 技术社区 · 6 年前

我有一个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个文件执行同样的操作。你们能帮我吗?

注: 我的应用程序正在脱机模式下运行,这意味着我无法使用Internet。

我试过了 this 解决方案,但它也不起作用。

2 回复 | 直到 6 年前

Achyuth Kodali 6 年前

这是不可能的,因为javascript是前端框架,它没有访问本地文件系统的权限。

但你可以用不同的方法。 ->您可以在本地服务器中提供该文件,并在任何后端框架中使用HTTP请求。

Alvaro Alves 6 年前

我认为你可以根据自己的意愿调整这支笔: 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();
            }
        }

你只需要处理结果。