локальный HTML-файл загрузки TXT

1

поэтому я использую локальный файл html и javascript как gui для видеофайлов. Это довольно большая версия моего сервера index.php для их использования в другом месте. Все работает нормально, но я пытаюсь загрузить контент из txt файла. Мой веб-сервер использует XMLHttpRequest для его получения, поскольку он является серверной. Но так как версия на вынос отсутствует на сервере, текстовый файл находится в том же локальном каталоге, что и 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"
    }
 }  
}

Это функция, которую я использую. Есть ли другой способ получить текст из файла с автономным файлом без сервера javascript?

Mitchell

  • 0
    как вы выполняете свой JavaScript? Если он в браузере, я не думаю, что он может получить доступ к вашему каталогу.
  • 0
    Под «локальным» вы подразумеваете, что используете file:// или какой-то протокол «нестандартного типа». Так что он не будет работать в Chrome и аналогичных браузерах из-за «ограничений безопасности». Это должно работать на Firefox, хотя: stackoverflow.com/a/38757037/4146962
Теги:
load
offline

1 ответ

0

Это более обходное решение, и оно связано с некоторыми ограничениями, но в зависимости от ваших целей оно может соответствовать вашим потребностям. Или нет.

AFAIK вы не сможете достичь этого с помощью XmlHttpRequest, но вы можете использовать FileReader для загрузки вашего файла. Вы можете найти рабочий пример в этом SO

Как открыть файл локального диска с помощью Javascript?

Недостатком является то, что FileReader должен запускаться из ручного взаимодействия. Таким образом, вы не сможете загрузить файл без нажатия пользователем (YOU) и просмотра загружаемого файла.

Не могли бы вы с этим справиться?

Если это так, это даже не так уж и плохо, потому что как только он был загружен, просто поместите содержимое файла в localeStorage, поэтому при следующем загрузке страницы или обновлении страницы данные из файла могут поступать из localeStorage, и вам не придется вручную вручную вручную загружать файл. За исключением, конечно, если файл был изменен, но поскольку вы не находитесь на сервере/веб-сервере, коэффициенты невелики, и файл автоматически изменится. Поэтому я предполагаю, что если вам нужно вручную изменить файл, вы также можете принять еще одно ручное вмешательство.

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

В случае, если вы уже не выбрали свой выбор, подумайте об использовании форматированного текста JSON в файле, а также в localeStorage, это упростит ваши преобразования данных.

[EDIT] И, конечно, если ваш файл никогда не изменится, просто вставьте свои данные в переменную javascript.

[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 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>
Поделиться
  • 0
    Спасибо за это. Это отвечает на действия пользователя в порядке. Только потому, что файл создается в какой-то момент и затем копируется в этот каталог, прежде чем пользователь возьмет его с собой. Как бы я хотел добавить его в переменную javascript? И это просто текстовый файл с простым текстом (небольшие абзацы или несколько предложений.
  • 0
    Я только что добавил пример

Ещё вопросы

Сообщество Overcoder
Наверх
Меню