javascript - 如何在Chrome上的javascript中读取客户端的本地文本文件？ - Thinbug

如何在Chrome上的javascript中读取客户端的本地文本文件？

时间：2014-02-14 10:50:07

标签： javascript google-chrome file-io google-chrome-extension io

我需要能够在Chrome扩展程序中读取设置文本文件，但无需要求用户设置此文件的路径。

我已尝试以下操作，但XMLHttpRequest()无法与Chrome中的file:///path/to/file.txt网址配合使用。

var x = new XMLHttpRequest(); 
x.open("GET","logins.txt",false); 
x.send(); 
myTextFile=x.responseText;

怎么做？

1 个答案:

答案 0 :(得分：1)

这可以在这里工作。请注意，我正在使用异步请求。

文件：

ls /path/to/extension/
background.js main.html manifest.json sample.txt test.js

的manifest.json：

{
    "name"          : "TEST XMLHttpRequest Local File",
    "version"       : "0.0.0.1",
    "manifest_version"  : 2,
    "minimum_chrome_version": "23",
    "app": {
        "background": {
            "scripts": [
                "background.js"
            ]
        }
    }
}

background.js：

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('main.html', {
        bounds: {
            width   : 200,
            height  : 300,
            left    : 100,
            top     : 100
        },
        minWidth    : 200,
        minHeight   : 300
    });
});

main.html中：

<html>
  <head>
    <title>TXT GET</title>
  </head>
  <body>
    <button id="btn">Get file</button>
    <pre id="log"></pre>
    <script type="text/javascript" src="test.js"></script>
  </body>
</html>

test.js：

var btn = document.getElementById('btn');
var log = document.getElementById('log');

function xhttpResponse() {
    log.innerHTML += this.responseText;
}

btn.addEventListener('click', function() {
    var x;

    log.innerHTML = "Get file " + (+new Date());
    x = new XMLHttpRequest();
    x.onload = xhttpResponse;
    x.open("GET", "sample.txt", true);
    x.send();
    log.innerHTML += "\n\n------ REQ SENT ------\n\n";
});

sample.txt的：

Lorem ipsum

结果：

[_Get file_]

Get file 1392378751700

------ REQ SENT ------

Lorem ipsum