Html 如何在弹出窗口中显示选定的文件预览

如何在弹出窗口中显示上载的文件预览？我只想在第八节做这件事。。现在预览按钮单击时显示预览

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;
        }
    } 

---

该组件有3个变量和一个名为

preview

的事件。变量

message

用于显示验证错误消息，

imgURL

将具有要预览的上载图像URL

预览

事件首先检查上传的文件引用。如果没有要上传的文件，它只会返回。它还验证上载文件的mime类型，因为只允许上载图像

接下来，它创建一个

FileReader

对象。

FileReader

对象允许web应用程序异步读取存储在用户计算机上的文件内容，使用File或Blob对象指定要读取的文件或数据。

readAsDataURL

方法开始读取指定文件的内容，完成后，result属性包含

URL

表示文件的数据

读取操作成功完成后，将触发

读卡器.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; 
    }
  }

@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();
  }

文件上载控件有一个名为

accept

的属性，其值设置为“Image/*”。accept属性指定服务器接受的文件类型（可通过文件上载提交），该属性只能与

一起使用

图像标记的

src

属性设置为组件中定义的

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">

<!-- 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 -->

现在在根模块中导入ngx bootstap模块，如下所示：

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

import { ModalDirective } from 'ng2-bootstrap';

将此CDN导入index.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>

在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();

这是弹出模式

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">

<!-- 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 -->

下面是您的弹出窗口示例

下载图像的解决方案

对于预览图像下载，您需要安装依赖项，即

npm i文件保护程序

然后，在下载函数调用时将file事件传递给download函数，例如，我们从事件中获取文件并存储到一个变量中

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>

下载
取消

---

这是我已经完成的完整解决方案。。u也显示预览，但不在弹出窗口中。。我只想在弹出窗口中显示它window@neethu等几分钟，我正在实现什么是ModalModule？我在尝试此未捕获错误时遇到此异常：由模块“AppModule”声明的意外模块“ModalModule”。请添加@Pipe/@Directive/@Component注释。@neethu vijayan让您安装

npm install ngx bootstrap

安装此依赖项后，您需要从“ngx bootstrap/modal”导入app.module.ts下的

import{ModalModule}

并置于导入下：[ModalModule.forRoot（）]并从“ng2引导”导入

import{ModalDirective}此
ModalDirective
模式显示的位置，如果不理解，请仔细阅读我的答案，如果不理解，请在导入后评论我@kiran Mistry，我也得到了相同的例外编辑您的问题，并显示错误代码，我想查看