Загрузить несколько изображений с предварительным просмотром без использования кнопки отправки - PullRequest
Новая
       47

Загрузить несколько изображений с предварительным просмотром без использования кнопки отправки

0 голосов
/ 12 июля 2020

Я пытаюсь создать форму загрузки продукта, в которой мне нужно загрузить несколько изображений и показать их превью. Пока я могу загрузить изображение с помощью кнопки отправки ... Как заставить его работать без кнопки отправки. Это мой демонстрационный код Stackblitz .

HTML

<form [formGroup]="myForm" (ngSubmit)="submit()">
 <div class="form-group">
        <label for="name">Name</label>
        <input 
            formControlName="name"
            id="name" 
            type="text" 
            class="form-control">
        <div *ngIf="f.name.touched && f.name.invalid" class="alert alert-danger">
            <div *ngIf="f.name.errors.required">Name is required.</div>
            <div *ngIf="f.name.errors.minlength">Name should be 3 character.</div>
        </div>
    </div>
<div class="form-group">
        <label for="file">File</label>
        <input 
            formControlName="file"
            id="file" 
            type="file" 
            class="form-control"
            multiple="" 
            (change)="onFileChange($event)">
        <div *ngIf="f.file.touched && f.file.invalid" class="alert alert-danger">
            <div *ngIf="f.file.errors.required">File is required.</div>
        </div>
    </div>
 <img *ngFor='let url of images'  [src]="url" height="150" width="200px" style="margin: 3px;"> <br/>
<button class="btn btn-primary" type="submit">Submit</button>
</form>

Компонент 

onFileChange(event) {
    if (event.target.files && event.target.files[0]) {
        var filesAmount = event.target.files.length;
        for (let i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = (event:any) => {
                  console.log(event.target.result);
                   this.images.push(event.target.result); 
                   this.myForm.patchValue({
                      fileSource: this.images
                   });
                }
                reader.readAsDataURL(event.target.files[i]);
        }
    }
  }

1 Ответ

1 голос
/ 12 июля 2020

как способ, которым вы можете вызвать его внутри события изменения в конце оператора if. Затем каждое изменение вы можете загружать файлы, не нажимая кнопку. 

onFileChange(event) {
    if (event.target.files && event.target.files[0]) {
        var filesAmount = event.target.files.length;
        for (let i = 0; i < filesAmount; i++) {
                var reader = new FileReader();
                reader.onload = (event:any) => {
                  console.log(event.target.result);
                   this.images.push(event.target.result); 
                   this.myForm.patchValue({
                      fileSource: this.images
                   });
                }
                reader.readAsDataURL(event.target.files[i]);
        }
    this.submit();
    }
  }
...