Question

我在图片上传中遇到问题。有两个图像上传部分，在第一个上传中效果很好。但是当我在第二张图片中上传时，仅在第一部分中更改。下面是代码详细信息：

<div class="upload">
  <div class="center_image">
    <div class="image-upload">
      <label for="file-input">
        <img *ngIf="!url1==true" src="/assets/images/upload.png">
        <img [src]="url1" height="60">
      </label>

      <input id="file-input" type="file" (change)="readUrl($event)" />
    </div>
    <h6 *ngIf="!url1==true" class="font_u">
      Upload Front</h6>
    <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Name</li>
        <li>Date of Birth
        </li>
        <li>Gender</li>
        <li> Aadhaar number
        </li>
        <li>Photograph</li>
      </ol>
    </div>
  </div>
</div>
<div class="upload">
  <div class="center_image">
      <div class="image-upload">
          <label for="file-input">
            <img *ngIf="!url2==true" src="/assets/images/upload.png">
            <img [src]="url2" height="60">
          </label>

          <input id="file-input" type="file" (change)="onSelectFileBack($event)" />
        </div>
        <h6 *ngIf="!url2==true" class="font_u">
          Upload Back</h6>
          <br>
    <div class="li_ol">
      <p>The following details must be clearly visible :</p>
      <ol>
        <li>Address</li>

        <li> Aadhaar number
        </li>

      </ol>
    </div>
  </div>
</div>

Javascript：

readUrl(event: any) {
alert(event);
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

  reader.onload = (event: any) => {
    this.url1 = event.target.result;
  }

  reader.readAsDataURL(event.target.files[0]);
}

}

onSelectFileBack(event: any) {
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();

  reader.onload = (event: any) => {
    this.url2 = event.target.result;
  }

  reader.readAsDataURL(event.target.files[0]);
}

}

在两个上传图片中，仅在第一部分上传，但div的功能甚至偶数功能都不同。

Answer 1

在第一部分中输入的文件：

   <input id="file-input" type="file" (change)="readUrl($event)" />

具有与第二部分中输入的文件相同的id：

   <input id="file-input" type="file" (change)="onSelectFileBack($event)" />

更改其中之一，以使它们各自唯一。

Answer 2

尝试使用与上面相同的代码创建stackblitz，并且按预期方式工作。仅触发了各自的输入更改事件。

https://stackblitz.com/edit/angular-hmuzzd?file=src%2Fapp%2Fapp.component.ts

Answer 3

向标签添加点击事件。

<label for="file-input" (click)="onChoose()">

从输入标签中删除 id="file-input" 并添加 "#fileinput" 模板变量。

<input #fileinput type="file" (change)="onSelectFileBack($event)" />

在 component.ts 文件中创建 onChoose 方法。

@ViewChild('fileinput') fileInput : ElementRef; 
onChoose():void{
  this.fileInput.nativeElement.click();
}

图片上传：Angular 6

3 个答案: