Чтение файла из тега ввода в AngularDart [дубликат]

Разделить на ") " и добавить ) к каждому элементу, кроме последнего.

7
задан Günter Zöchbauer 14 September 2016 в 05:25
поделиться

5 ответов

API FileReader является асинхронным, поэтому вам нужно использовать обработчики событий.

var input = window.document.querySelector('#upload');
Element log = query("#log");

input.addEventListener("change", (e) {
  FileList files = input.files;
  Expect.isTrue(files.length > 0);
  File file = files.item(0);

  FileReader reader = new FileReader();
  reader.onLoad = (fileEvent) {
    print("file read");
    log.innerHTML = "file content is ${reader.result}";
  };
  reader.onerror = (evt) => print("error ${reader.error.code}");
  reader.readAsText(file);
});

вам также необходимо разрешить загрузку файлов в ваш браузер, что можно сделать в Chrome, запустив его с помощью флажка --allow-file-access-from-files

11
ответ дан auselen 16 August 2018 в 02:41
поделиться
  • 1
    Я пытаюсь использовать только дротик: html atm (вы не можете использовать оба: /). При использовании дротика: html вы не можете добавить обработчиков в filereader. Надеюсь, что вы не можете помочь: p – user1199863 9 February 2012 в 21:03
  • 2
    добавлен пример использования обеих библиотек вместе – Lars Tackmann 9 February 2012 в 21:46
  • 3
    Вау, спасибо, ТАК БОЛЬШОЙ человек. Действительно ценю это! – user1199863 10 February 2012 в 00:01

Моя попытка

  void fileSelected(Event event) async {
    final files = (event.target as FileUploadInputElement).files;
    if (files.isNotEmpty) {
      final reader = new FileReader();

      // ignore: unawaited_futures
      reader.onError.first.then((evt) => print('error ${reader.error.code}'));
      final resultReceived = reader.onLoad.first;
      reader.readAsArrayBuffer(files.first);

      await resultReceived;
      imageReference.fileSelected(reader.result as List<int>);
    }
  }
2
ответ дан Günter Zöchbauer 16 August 2018 в 02:41
поделиться

Как читать файл с помощью dart:html.

document.querySelector('#myinputelement`).onChange.listen((changeEvent) {
    List fileInput = document.querySelector('#myinputelement').files;

    if (fileInput.length > 1) {
        // More than one file got selected somehow, could be a browser bug.
        // Unless the "multiple" attribute is set on the input element, of course
    }
    else if (fileInput.isEmpty) {
        // This could happen if the browser allows emptying an upload field
    }

    FileReader reader = new FileReader();
    reader.onLoad.listen((fileEvent) {
          String fileContent = reader.result;
          // Code doing stuff with fileContent goes here!
    });

    reader.onError.listen((itWentWrongEvent) {
          // Handle the error
    });

    reader.readAsText(fileInput[0]);
});
3
ответ дан Jop V. 16 August 2018 в 02:41
поделиться

Благодаря помощи этого сообщения, я получил его для работы. Я по-прежнему использовал обработчик событий во входном теге и убедился, что я НЕ импортировал оба дротика: io и dart: html, нужен только dart: html.

Вот как выглядел мой последний AppComponent.

import 'dart:html';

import 'package:angular/angular.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
)

class AppComponent {
  // Stores contents of file upon load
  String contents;

  AppComponent();

  void fileUpload(event) {
    // Get tag and the file 
    InputElement input = window.document.getElementById("fileUpload");
    File file = input.files[0];

    // File reader and event handler for end of loading
    FileReader reader = FileReader();
    reader.readAsText(file);
    reader.onLoad.listen((fileEvent) {
      contents = reader.result;
    });
  }
}

Вот как выглядит мой шаблон:

<h1>File upload test</h1>
<input type="file" (change)="fileUpload($event)" id="fileUpload">
<div *ngIf="contents != null">
    <p>Hi! These are the contents of your file:</p>
    <p>{{contents}}</p>
</div>
0
ответ дан Rafael Lopez 16 August 2018 в 02:41
поделиться
2
ответ дан Günter Zöchbauer 6 September 2018 в 01:56
поделиться
Другие вопросы по тегам:

Похожие вопросы: