本地html加载txt文件

Question

so i am using a local html and javascript file as a gui for video files. 所以我正在使用本地html和javascript文件作为视频文件的gui。 It is pretty much a take-away version of my server index.php for them to use elsewhere. 这几乎是我的服务器index.php的外卖版本，它们可以在其他地方使用。 Everything works fine, but i am trying to load content from a txt file. 一切正常，但我正在尝试从txt文件加载内容。 My webserver uses XMLHttpRequest to retrieve it, as it is server side. 我的网络服务器使用XMLHttpRequest来检索它，因为它是服务器端。 But since the takeaway version isn't on the server, the text file resides in the same local directory as the html file 但是由于外卖版本不在服务器上，因此文本文件与html文件位于同一本地目录中

function loadBookmarks(){
  var infoDoc = new XMLHttpRequest()
  infoDoc.open("GET","info.bk");
  infoDoc.send();
  infoDoc.onreadystatechange = function() {
    if (infoDoc.readyState== 4 && infoDoc.status == 200) {
        document.getElementById("bookmarks").querySelector('p').innerHTML = infoDoc.responseText;
        document.getElementById("infoButton").style.backgroundColor = "#119933";
    } else {
        document.getElementById("bookmarks").querySelector('p').innerHTML = "";
        document.getElementById("infoButton").style.backgroundColor = "#993333"
    }
 }  
}

That is the function i am using. 那就是我正在使用的功能。 Is there another way to get the text from the file with an offline non server javascript file? 还有另一种方法可以使用非服务器离线javascript文件从文件中获取文本吗？

Mitchell 米切尔

Answer 1

It's more a workaround and it involves some constraints but depending on your goals it may fit your needs. 这是一种解决方法，涉及一些约束，但根据您的目标，可能会满足您的需求。 Or not. 或不。

AFAIK you won't be able to achieve this with XmlHttpRequest but you can use a FileReader to load your file. AFAIK您将无法使用XmlHttpRequest实现此目的，但可以使用FileReader加载文件。 You can find a working example in this SO 您可以在此SO中找到一个有效的示例

How to open a local disk file with Javascript? 如何使用Javascript打开本地磁盘文件？

Downside is that FileReader has to be triggered from a manual interaction. 缺点是FileReader必须从手动交互中触发。 So you won't be able to load your file without a user ( YOU ) clicking and browsing the file to be loaded. 因此，如果没有用户（YOU）单击并浏览要加载的文件，您将无法加载文件。

Could you deal with it ? 你能应付吗？

If so, it's even not that worse, because once it has been loaded, just put the content of the file into the localeStorage, so the next time loading the page, or refreshing the page, the data from the file could comes from the localeStorage, and you won't have to select manually the file to be loaded again. 如果是这样，那就更糟了，因为一旦加载完毕，只需将文件内容放入localeStorage中即可，因此下次加载页面或刷新页面时，文件中的数据可能来自localeStorage ，您无需手动选择要再次加载的文件。 Except of course if the file has changed, but as you are not on a server/webserver, odds are low that the file will change automatically. 当然，如果文件已更改，但您不在服务器/ Web服务器上，则文件自动更改的可能性很小。 So I will guess that if you have to change the file manually you could also accept one more manual intervention. 因此，我想如果您必须手动更改文件，则还可以接受另一种手动干预。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

In case it wasn't already your choice, consider using JSON formatted text in the file and also in the localeStorage, it could simplify your data transformations. 如果还不是您的选择，请考虑在文件和localeStorage中使用JSON格式的文本，它可以简化您的数据转换。

[EDIT] And of course if your file has never going to change, just embed your data into a javascript variable. [编辑]当然，如果您的文件永不改变，只需将数据嵌入到javascript变量中即可。

[EDIT 2] Example [EDIT 2]示例

<body>
    <!-- The input widget to select a file from browse -->
    <input type="file" id="file-input" />

    <!-- testing purpose only, a markup to display the loaded file content -->
    <h3>Loading a file:</h3>
    <pre id="file-content"></pre>
    <script>

    // Place a listener to know when the page is loaded
    window.addEventListener('load',function(e){
      // If there is some persistent data on the browser called 'stored_data'
      if( localStorage.getItem('stored_data')){
        // We can do something with this data
        // without asking a user interaction at first
        // User interaction could be done in order to refresh the data ( file changed since storing in browser cache )
        doSomethingWithFileContents();
      }
    });

    /**
     * This is the callback of the addEventListener, it will be executed each time user select a file
     * It's linked below, on the addEventListener call
     */
    function readSingleFile(e) {
      //retrieve the first selected file the user has select
      var file = e.target.files[0];

      // If no file selected, abort this function execution
      if (!file) {
        return;
      }
      // If a file is selected, create a new file reader
      var reader = new FileReader();

      // Define a callback to be run when the file will be loaded
      reader.onload = function(e) {

        // You can still use some console.log for debugging purpose
        //console.log(e);

        // Retrive the content of the loaded file
        var contents = e.target.result;

        // To enable some persistency, store the contents into a localeStorage
        // It means next time you load the page, the data could come from the browser cache
        localStorage.setItem('stored_data', contents );

        // Will can now call the logic what we need to do with the file content
        doSomethingWithFileContents();
      };

      // Trigger the file reader to load the selected file
      reader.readAsText(file);
    }

    /**
     * This function will be executed when data is ready.
     * You should implements the logic that should be run with the file data
     *
     *  - Data is ready could mean:
     *      - Data was available through localStorage
     *      - Data has just been loaded through FileReader
     */
    function doSomethingWithFileContents() {

      // Retrieve the cached data
      var loadedData = localStorage.getItem('stored_data');

      // Get the element that will display the raw data
      var element = document.getElementById('file-content');
      // Set its content to the storedData
      element.textContent = loadedData;

      // Once again, I strongly recommend you to use JSON formatted value in the file
      // It will enable some easy transformation/parsing from js side


    }

    // Place a addEventListener on the file-input id element
    // When its value changed, run the readSingleFile function
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);
</script>
</body>

本地html加载txt文件

问题描述

1 个解决方案

解决方案1
0 2018-05-04 00:28:30

本地html加载txt文件

问题描述

1 个解决方案

解决方案1 0 2018-05-04 00:28:30

解决方案1
0 2018-05-04 00:28:30