javascript - 无法使用 angular5 在输入中显示文件上传详细信息

Question

在这里，我使用文件 ng2 文件上传来上传文件，直到现在我能够获取文件名和文件详细信息。但问题是我想在输入中显示文件类型和其他详细信息，如文件大小和文件名。假设我上传单个文件，假设 '.jpeg' 然后 filename:xxx.jpeg,filetype: image/jpeg 必须显示，如果我上传多种类型，即 .jpeg,.jpeg,.png,.gif 然后 .jpeg, .png，.gif。如果多个文件具有相同的类型，则只需显示“”和其他详细信息，如文件名和文件大小。对于单个文件，它必须显示详细信息，对于多个文件，它必须在输入中显示“”，因为我想在输入中显示它，虽然我正在显示“*”，但我想获取多个文件名和文件大小。

.ts code:
import { Component } from '@angular/core';
import { FileUploader, FileUploadModule, FileItem } from 'ng2-file-upload';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  file_type='';
  file_size='';
  file_name='';
   private URL: string = 'https://evening-anchorage-3159.herokuapp.com/api/';
  public uploader: FileUploader = new FileUploader({ url: this.URL });
  //const URL = 'https://evening-anchorage-3159.herokuapp.com/api/';
  //public uploader:FileUploader = new FileUploader({url: URL});
  public hasBaseDropZoneOver:boolean = false;
  public hasAnotherDropZoneOver:boolean = false;

  public fileOverBase(e:any):void {
    this.hasBaseDropZoneOver = e;
  }

  public fileOverAnother(e:any):void {
    this.hasAnotherDropZoneOver = e;
  }

  constructor(){

    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {

       console.log(item);
       for(var i=0;i <= item.FileItem.length;i++){
         console.log(i);

       }
      // this.file_name =item['file']['name'];
      // this.file_type = item['file']['type'];
      // this.file_size = item['file']['size'];
    }


  }
}

**.html code**


<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href> File Upload</a>
        </div>
    </div>

    <div class="row">

        <div class="col-md-3">

            <h3>Select files</h3>

            <div ng2FileDrop [ngClass]="{'nv-file-over': hasBaseDropZoneOver}" (fileOver)="fileOverBase($event)" [uploader]="uploader" class="well my-drop-zone">
                Base drop zone
            </div>
        </div>
    </div>

    <div class="col-md-9" style="margin-bottom: 40px">

        <h3>Upload queue</h3>
        <p>Queue length: {{ uploader?.queue?.length }}</p>
        <input type="text" [(ngModel)]="file_type">
        <input type="text" [(ngModel)]="file_name">
        <input type="text" [(ngModel)]="file_size">

        <table class="table">
            <thead>
                <tr>
                    <th width="50%">Name</th>
                    <th>Size</th>
                    <th>Progress</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of uploader.queue">
                    <td><strong>{{ item?.file?.name }}</strong></td>
                    <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                    <td *ngIf="uploader.isHTML5">
                        <div class="progress" style="margin-bottom: 0;">
                            <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                        </div>
                    </td>
                    <td class="text-center">
                        <span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
                        <span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
                        <span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
                    </td>
                    <td nowrap>
                        <button type="button" class="btn btn-success btn-xs" (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                        <span class="glyphicon glyphicon-upload"></span> Upload
                    </button>
                        <button type="button" class="btn btn-warning btn-xs" (click)="item.cancel()" [disabled]="!item.isUploading">
                        <span class="glyphicon glyphicon-ban-circle"></span> Cancel
                    </button>
                        <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()">
                        <span class="glyphicon glyphicon-trash"></span> Remove
                    </button>
                    </td>
                </tr>
            </tbody>
        </table>

        <div>
            <div>
                Queue progress:
                <div class="progress" style="">
                    <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
                </div>
            </div>
            <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
                <span class="glyphicon glyphicon-upload"></span> Upload all
            </button>
            <button type="button" class="btn btn-warning btn-s" (click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
                <span class="glyphicon glyphicon-ban-circle"></span> Cancel all
            </button>
            <button type="button" class="btn btn-danger btn-s" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                <span class="glyphicon glyphicon-trash"></span> Remove all
            </button>
        </div>

    </div>





</div>

我的 stackblitz 工作网址

https://stackblitz.com/edit/angular-mn3dvh

标签： javascriptangulartypescript

Answer 1

这个编辑过的 stackblitz链接可能会对您有所帮助。使用 3 组我们可以对类型进行分组。使用这 3 组你可以做你想做的事。

在.ts

  file_type : Set<string> = new Set<string>();
  file_size : Set<number> = new Set<number>();
  file_name : Set<string> = new Set<string>();

 public dropped(event:any) {

    for (var key = 0; key < event.length; key++) {
    let file = event[key];
      this.file_name.add(file.name)
      this.file_size.add(file.size)
      this.file_type.add(file.type)
}

在 html 中

        <input type="text" [ngModel]="file_type.size>1?'*':file_type.values().next().value">
        <input type="text" [ngModel]="file_name.size>1?'*':file_name.values().next().value">
        <input type="text" [ngModel]="file_size.size>1?'*':file_size.values().next().value">