Как показать предварительный просмотр выбранного файла во всплывающем окне

Question

Как показать предварительный просмотр загруженного файла во всплывающем окне? я просто хотел сделать это в angular 8 .. Теперь предварительный просмотр отображается при нажатии кнопки предварительного просмотра. ..

preview() {
        // Show preview 
        var mimeType = this.fileData.type;
        if (mimeType.match(/image\/*/) == null) {
            return;
        }

    }
    previewFile() {
        var reader = new FileReader();
        reader.readAsDataURL(this.fileData);
        reader.onload = (_event) => {
            this.previewUrl = reader.result;
        }
    } 

Answer 1

Компонент имеет 3 переменные и одно событие с именем preview. Переменная message используется для отображения сообщения об ошибке проверки, а imgURL будет иметь URL загруженного изображения для предварительного просмотра.

Событие preview сначала проверяет ссылку на загруженный файл. Если нет файлов для загрузки, он просто возвращается. Он также проверяет тип mime загруженного файла, поскольку разрешено загружать только изображения.

Затем создается объект FileReader. Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов, хранящихся на компьютере пользователя, используя объекты File или Blob для указания файла или данных для чтения. Метод readAsDataURL начинает чтение содержимого указанного файла и после завершения атрибут результата содержит URL, представляющий данные файла.

Событие reader.onload запускается после успешного завершения операции чтения. , Внутри события загрузки значение imgURL устанавливается равным результату, возвращаемому объектом fileReader.

TS

public imagePath;
  imgURL: any;
  public message: string;

  preview(files) {
    if (files.length === 0)
      return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]); 
    reader.onload = (_event) => { 
      this.imgURL = reader.result; 
    }
  }

Элемент управления загрузкой файла имеет атрибут с именем accept со значением, установленным на «Image / *» . Атрибут accept указывает типы файлов, которые принимает сервер (которые могут быть отправлены посредством загрузки файла), и этот атрибут может использоваться только с <input type=”file”>.

Атрибут src тега image установите в imgURL свойство, определенное в компоненте.

HTML

<h3>Angular 8 Image Preview before Upload:</h3>
<span style="color:red;" *ngIf="message">{{message}}</span>
<input #file type="file" accept='image/*' (change)="preview(file.files)" />
<img [src]="imgURL" height="200" *ngIf="imgURL">

, а второй параметр - для отображения изображения, который означает, что при отсутствии загрузки изображения тогда изображение по умолчанию будет отображаться следующим образом

Просто добавьте эту строку

<img [src]="imgURL || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSR2EkcTCrrdW1cyriPIgrCzaB8X3B0Mp1lXkFgSoX5n0gh9x40dA&s'" height="200" > <!-- This example is for displaying placeholder image if no image found -->

, которую вы можете просмотреть или Редактировать здесь

ВТОРОЙ ВАРИАНТ

И Для Для отображения во всплывающем окне вам необходимо установить некоторые зависимости для bootstrap

Сначала установите модуль ngx- bootstrap npm, используя команду CLI ниже.

npm install ngx-bootstrap

Теперь импортируйте модуль ngx-bootstap в ваш модуль root следующим образом:

import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({ 
  imports: [
    ModalModule.forRoot()
  ]
});

После установки импортируйте этот CDN в индекс . html

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Затем импортируйте этот модуль в файл TS и используйте его следующим образом:

import { ModalDirective } from 'ng2-bootstrap';

А в angular 8 @ViewChild нужно 2 аргумента

@ViewChild('myModel',{static: false}) myModel: ModalDirective;

// Now use this code to when you want open model :
this.myModel.show();

// Now use this code to when you want hide model :
this.myModel.hide();

А это мод PopUp

HTML

<!-- POPUP FOR IMAGE PREVIEW --> 
<div class="modal fade" bsModal #myModel="bs-modal" [config]="{backdrop: 'static'}"
    tabindex="-1" role="dialog"
    aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">  
          <span class="hide" (click)="hide()">&times;</span> 
        <div class="modal-body">     
          <div class="text-center">
           <img [src]="imgURL" height="200">
          </div>
        </div>
        </div>
     </div>
</div>
<!-- POPUP FOR IMAGE PREVIEW -->

TS

@ViewChild('myModel',{static: false}) myModel: ModalDirective;

  public imagePath;
  imgURL: any;
  public message: string;

  preview(files) {
    if (files.length === 0)
      return;

    var mimeType = files[0].type;
    if (mimeType.match(/image\/*/) == null) {
      this.message = "Only images are supported.";
      return;
    }

    var reader = new FileReader();
    this.imagePath = files;
    reader.readAsDataURL(files[0]); 
    reader.onload = (_event) => { 
      this.imgURL = reader.result; 
      this.myModel.show();
    }
  }

  hide(){
    this.myModel.hide();
  }

Вот ваш пример с popUP С PopUp

РЕШЕНИЕ ДЛЯ СКАЧИВАНИЯ ИЗОБРАЖЕНИЯ

И для предварительного просмотра изображения Вам необходимо установить зависимость, т.е. npm i file-saver

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

download(files){
  var previewImage = files[0];
  FileSaver.saveAs(previewImage);
}

и импортировать зависимость сохранения файла, где вы реализуете предварительный просмотр

import * as FileSaver from "file-saver";

, и это modal-footer для кнопки загрузки и отмены

<div class="modal-footer">
          <button type="button" class="btn btn-success" (click)="download(file.files)">Download</button>
          <button type="button" class="btn btn-danger" (click)="hide()">Cancel</button>
        </div>

Вот полное решение Проверьте здесь