Веб-разработка Отображение локальных файлов

Question

Основываясь на результатах исследований, я нашел обучающие материалы, such as this one from Eric Bidelman, которые входят в использование FileReader. Вместо локальных файлов эти учебники используют файлы, предоставленные пользователем. Изменение этих примеров, чтобы попытаться отобразить локальные файлы, не было успешным.

После некоторого исследования я обнаружил, что большинство браузеров по умолчанию не разрешают доступ к локальным файлам [1]. Некоторые рекомендуют использовать небезопасные режимы для тестирования, но это не то, что я ищу, поскольку это относится только к моему тестированию [2].

В настоящее время разрешаю загрузку файлов журнала. Моя цель здесь с FileReader заключалась в том, чтобы предоставить способ просмотра файлов. Есть ли способ достичь этого? Я придумываю пробелы и почти смирился только с возможностью загрузки вместо добавления просмотра. Ниже приведен пример кода чтения локального файла. Этот код не работает, поскольку «logpath» не имеет типа blob. Я считаю, что мой вопрос действительно не требует кода, но в любом случае я представил пример.

HTML код

<select name="loglist" id="loglist" onchange="run()" size="2"> 
    <option>stack1.log</option> 
    <option>stack2.log</option> 
</select> 

Javascript

function run() { 
    var reader = new FileReader(); 

    log = document.getElementById("loglist").value; 
    var logdir = "/var/log/"; 
    var logpath = logdir.concat(log); 

    reader.onload = function() { 
     logtext = reader.result; 
     alert(logtext); 
    } 
    reader.readAsText(logpath); 
} 

Answer 1

Там нет никакого способа для JavaScript, встроенный в веб-страницу, чтобы получить доступ к файлам на локальном компьютере пользователя, кроме как через File API когда пользователь выбирает файл, используя файл ввода. Невозможно, чтобы страница предоставила имя файла для открытия.

var inp = document.querySelector("input"); 
 
inp.addEventListener("change", show); 
 

 
function show(e) { 
 
    var f = this.files[0]; 
 
    var r = new FileReader(); 
 
    r.addEventListener("load", display); 
 
    r.readAsText(f); 
 

 
    function display(e) { 
 
    document.body.appendChild(
 
     document.createTextNode(
 
     e.target.result 
 
    ) 
 
    ); 
 
    } 
 
}

<input type="file" id="input">