javascript - 使用embed或iframe在模态下以 Angular 4上传之前进行预览

原文 标签 javascript node.js html angular

由于弹出窗口,我在此代码上遇到了问题:

@component
public visualizarArquivo(file): void {
    var url = window.URL.createObjectURL(file);
    var a = document.createElement("a");
    a.setAttribute("href", url);
    a.setAttribute("target", "_blank");
    a.click();
}


@html
<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png (change)="onFileChange($event)">
    </fieldset>

    <button id="view" type="button" class="btn btn" (click)="openPhoto(contentPhoto)">
        <span class="fa fa-eye"></span>
    </button>
</div>

现在,我需要以模式打开此文件,如何使用iframe或嵌入?

最佳答案

如果您喜欢使用以下两种方法之一,则您的代码将类似于以下内容:

方法1 :将ng2-pdf-viewerthis image preview code-

<div class="col-md-6">
    <fieldset class="form-group">
        <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
        <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
    </fieldset>
</div>

<div class="col-md-6">
    <img [src]="localUrl" *ngIf="localUrl && isImg" class="imgPlaceholder">
    <pdf-viewer [src]="localUrl" *ngIf="localUrl && isPdf" [render-text]="true" style="display: block;"></pdf-viewer>
</div>


export class AppComponent {          // or your component
    localUrl: any[];
    isImage = false;
    isPdf = false;
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            if(event.target.files[0].type == "application/pdf") {
                isImage = true;
                isPdf = false;      // required, going forward
            }
            else {
                isPdf = true;
                isImage = false;    // required, going forward
            }
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
            reader.readAsDataURL(event.target.files[0]);
        }
    }
}

方法2 :使用IFrame
<input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="showPreview($event)">
<div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" [src]="localUrl"></iframe>
</div>

export class AppComponent {          // or your component
    localUrl: any[];
    constructor() { }
    showPreview(event: any) {
        if (event.target.files && event.target.files[0]) {
            var reader = new FileReader();
            reader.onload = (event: any) => {
                this.localUrl = event.target.result;
            }
        }
    }
}

然后,您可以将其显示为模态!为了基本了解,我将其显示为div

关于javascript - 使用embed或iframe在模态下以 Angular 4上传之前进行预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50331126/

相关文章:

javascript - 正则表达式匹配 textarea 中的换行符

javascript - 使用ActiveX获取工作表名称列表以在JavaScript中进行数组

javascript - Angular-是其他元素的子元素

node.js - 如何在一个EC2实例上运行多个应用程序

php - WordPress的<?php body_class(); ?>问题

javascript - 我使用了Interactive Picture jQuery,如何链接该框?

javascript - Javascript:创建动态变量和对象名称。/html5 localstorage

node.js - npm install express --save 命令即使在设置代理后也会出现 403 禁止错误

jquery - 在 DOM 中从 SVG 创建 Google Maps MarkerImage

html - Bootstrap 4 : Full Width Inline Button