图片上传后需要帮助在所选图片之间切换

Question

预期行为：

单击表格行应仅在右侧 div 中显示所选图像。

当前状态：

单击每个表格行会显示选定的图像，而不切换正在选择的图像。另一个错误是再次单击上一个表格行会创建图像的另一个副本。

Plunker

http://plnkr.co/edit/26VanqdKqltbD6Bdclg9?p=preview

media-image.component.html

<div id="media-content-container">
    <div id="media-content-wrapper">
        <div id="upload-selected-images">
            <input
                type="file"
                id="files"
                name="files[]"
                (change)="handleFileSelect($event)"
                multiple />
        </div>
        <table class="table" id="list">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Size</th>
                </tr>
            </thead>
            <tbody>
                <tr 
                    *ngFor="let image of images, let i = index "
                    (click)="displayImage(files[i])">
                    <td>{{image.fileName}}</td>
                    <td>{{image.fileType}}</td>
                    <td>{{image.fileSize}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="selected-image">
    </div>
</div>

media-image.component.ts

import { Component, OnInit }                            from '@angular/core';

@Component({
    selector: 'app-media-image',
    templateUrl: './media-image.component.html',
    styleUrls: ['./media-image.component.css']
})
export class MediaImageComponent implements OnInit {
    images:any = [];
    files:FileList;
    ngOnInit(){
    }

    handleFileSelect(evt) {
        this.files = evt.target.files; // FileList object
        console.log("this.files:: ", this.files);
        for (let i = 0, f; f = this.files[i]; i++) {
            if (!f.type.match('image.*')) {
                continue;
            }
            this.images.push({ 
                fileName: encodeURI(f.name),
                fileType: f.type || 'N/A',
                fileSize: `${f.size} bytes`
            });
            console.log("images:: ", this.images);
        }
    }
    displayImage( f ){
        let reader = new FileReader();

        // Closure to capture the file information.
        reader.onload = (function(theFile) {
            return function(e){
                // Render thumbnail.
                let div = document.createElement('div');
                // div.className = 'ad-images';
                // div.style.cssText = 'display:none';
                div.innerHTML = ['<img style="height:80px;" src="', e.target.result,
                '" title="', encodeURI(theFile.name), '"/>'].join('');
                document.getElementById('selected-image').insertBefore(div, null);
            }
        })(f);
        // Read in the image file as a data URL.
        reader.readAsDataURL(f);
    }
}

media-image.component.css

#media-content-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2em 0;
}

Answer 1

你有两种方法可以做到这一点。

1) 使用您当前的代码，您可以通过删除 div 的子项来清除 div 的内部，或者

2) 以有角度的方式进行。你可以让 src 成为一个变量，然后让 angular 进行更新。

此链接将帮助您开始使用 2 Angular 2 change image src attribute。

Answer 2

您的代码中有几个问题。我将它们固定在新的 plnkr 中。 公众号：http://plnkr.co/edit/AzVB1NVvlGwbJ15f5TjZ?p=preview

第二个错误是由于这段代码：

this.files = evt.target.files; 

每次上传新图片时，您都会重置文件数组。我将它移到 for 循环中来解决这个问题。

---

其他代码更改是：

组件中的新字段：

  seletedImageUrl: string;
  selectedImageName: string;

图片上传代码：

displayImage( i){
  let reader = new FileReader();
  const selectedFile = this.files[i];

  reader.onload = e => {
      this.selectedImageUrl =e.target.result;
      this.selectedImageName = encodeURI(selectedFile.name);      
  };

  reader.readAsDataURL(selectedFile);
}

HTML

  <img *ngIf="selectedImageUrl && selectedImageName" 
     style="height:80px;" 
     [src]="selectedImageUrl" 
     [title]="selectedImageName"/>