Входной файл Angular2 onchange

У меня есть входной файл (без отправки - типичный входной файл). Я хотел бы вызвать некоторую функцию, когда выбрал файл.

Пример: я нажимаю «Выбрать файл» -> выбрать файл -> теперь система обнаруживает изменения и вызывает некоторую функцию, которая печатает всю эту информацию о файле (например, имя изображения).

Я не могу использовать ngModel для входного файла, верно? Как это сделать?

Ответы на вопрос(3)

пока я не добавил onclick = "this.value = null", как показано здесь:https://stackoverflow.com/a/42357862/634650

Решение Вопроса

Используйте следующее в вашем шаблоне:

<div class="modal-body">
   <input type="file" (change)="fileChangeEvent($event)" placeholder="Upload file..." />
   <img id="preview" src="" alt="Preview">
</div>

Тогда ваш компонентfileChangeEvent() как

public fileChangeEvent(fileInput: any){
      if (fileInput.target.files && fileInput.target.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e : any) {
            $('#preview').attr('src', e.target.result);
        }

        reader.readAsDataURL(fileInput.target.files[0]);
    }
}

Вся информация, связанная с вашим файлом, будет утешаться ....

 Double H20 июл. 2016 г., 13:04
пожалуйста, обратитесь ...jsfiddle.net/eD2Ez
 Double H20 июл. 2016 г., 12:38
смотри мой обновленный ответ
 Zhang Buzz27 июн. 2018 г., 00:23
@MartijnvandenBergh см. Ответ Криса ниже.
 chrismarx02 февр. 2018 г., 16:26
Есть ли здесь тип, который мы можем использовать вместо «любой»? У меня есть какие-либо инвалиды в моем проекте
 Martijn van den Bergh11 мая 2017 г., 09:52
А что если я должен отправить / загрузить один и тот же файл два раза? событие изменения не запускается, если я выбираю один и тот же файл дважды. Есть ли какое-то событие отправки, которое я могу использовать?
 elzoy20 июл. 2016 г., 11:24
Спасибо, это работает. Вы хоть представляете, как я могу показать выбранную фотографию? В ответе fileInput.target.files нет пути.

чтобы не полагаться на jQuery и не допустить ошибок веб-пакета на e.target.result.

<img [src]="imageSrc" alt="" />
<input type="file" capture="camera" accept="image/*" (change)="displayPhoto($event)">

Машинописный код

displayPhoto(fileInput) {
  if (fileInput.target.files && fileInput.target.files[0]) {
  const reader = new FileReader();

  reader.onload = ((e) => {
    this.imageSrc = e.target['result'];
  });

  reader.readAsDataURL(fileInput.target.files[0]);
}

}

Ваш ответ на вопрос