Задайте путь к файлу для ввода в angular

#html #angular

#HTML #angular

Вопрос:

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

файл .ts

 fileChanged(e: any) {
    this.file = e.target.files[0];
    this.readDocument();
  }

  readDocument() {
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(fileReader.result);
    }
    fileReader.readAsText(this.file);
  }
  

.html

 <div class="Block">
  <label id="lbl">Code </label>
  <input type='file' (change)="fileChanged($event)">
</div>
  

Если FileReader не является приемлемым вариантом, не могли бы вы показать мне, как это сделать другим способом? Спасибо.

Ответ №1:

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

Вы сможете получить доступ только к имени файла и его содержимому.

Имейте в виду, что это может быть сделано, когда мы находимся в контексте серверного скрипта в сценариях, использующих node.js или другие серверные фреймворки. Также при запуске таких вещей, как gulp, для выполнения таких действий, как сборка scss в css.

Комментарии:

1. Мне нужно получить доступ к содержимому, не нажимая кнопку ввода. Все, что мне нужно сделать, это поместить путь в поле ввода, и как только я нажму кнопку, он прочитает содержимое текстового файла.

2. Итак, пользователь добавляет файл, и вы затем хотите отобразить имя файла в поле ввода, а затем, когда они нажимают кнопку, показывать содержимое файла?

3. Прошу прощения за путаницу. Это похоже на это. Файл находится в сети. Мне нужно получить к нему доступ, введя путь к файлу в текстовое поле, как только я нажму кнопку, я смогу увидеть содержимое текстового файла в текстовой области. Я не хочу использовать кнопку ввода для выбора файла. Я просто хочу поместить его в текстовое поле.

4. То есть файлы находятся не локально на устройстве пользователя, а на каком-то сервере?

5. Что ж, в таком случае проблема, описанная в исходном ответе, все еще остается в силе. Вы не можете прочитать файловую систему с помощью javascript в браузере, поскольку это было бы ошибкой безопасности по дизайну. Похоже, вам нужно каким-то образом получить к нему доступ с помощью запроса GET через http.