javascript - Behöver hjälp med att växla mellan vald bild efter bilduppladdning

Förväntat beteende:

Att klicka på en tabellrad ska visa endast den valda bilden i en div till höger.

Nuvarande tillstånd:

Att klicka på varje tabellrad visar den valda bilden utan att växla bilden som väljs. Ett annat fel är att när man klickar på den föregående tabellraden igen skapas en annan kopia av bilden.

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

Svar #1

Det fanns flera problem i din kod. Jag har åtgärdat dem i en ny plnkr. Plnkr: http://plnkr.co/edit/AzVB1NVvlGwbJ15f5TjZ?p=preview

Den andra buggen beror på denna kod:

this.files = evt.target.files; 

Varje gång du laddar upp en ny bild återställer du filarrayen. Jag flyttade den in i for-loopen för att åtgärda detta.

Andra kodändringar är :

Nya fält i komponent:

  seletedImageUrl: string;
  selectedImageName: string;

Bilduppladdningskod :

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

Svar #2

Du har 2 sätt att göra detta.

1) med din nuvarande kod kan du rensa insidan av div:en genom att ta bort div:ens barn, eller

2) gör det på Angular-sättet. Du skulle göra src till en variabel och detta skulle i sin tur låta Angular göra uppdateringen.

Denna länk kommer att hjälpa dig att komma igång med 2 Angular 2 ändra bildens src-attribut.