Question

如果我单击“图像图标”，则图标应该是可单击的，并且应该打开一个弹出窗口[对话框]以上传新图像... Sample Image for your reference 请在此先感谢我

<div class="d-flex align-items-start summary" style="margin-bottom: 10px;">

                <img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);"
                    class="mr-3 d-none d-sm-block" alt="...">
                <i *ngIf="isEditItems"  style="color : white;left: 52px;
                    position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); border-radius: 50%;font-size: 12px;"
                    class="fa fa-pencil fa-lg" aria-hidden="true" ></i>

                <div>

                    <div class="summary-details">This is a sample text. You can upload your profile picture here. This
                        will be visible to all clients in your contact information. You can change it again if you
                        want.

                    </div>
                </div>
            </div>

Answer 1

您可以拥有这个简单的html。类file-hidden只是一个display:none

<div class="some-class">
  <img src="app/img/your-image.png" (click)="uploader.click()"/>
  <input #uploader class="file-hidden" type="file" accept="image/*" value=""  (change)="getDataFromImageSelection($event)">
</div>

然后通过ts

getDataFromImageSelection(fileInput: any, guid, index){
    if(fileInput.target.files.length > 0){
      let file = fileInput.target.files[0];
      var reader = new FileReader();
      reader.onload = this._handleReaderLoaded.bind(this); // <-- this is async
      reader.readAsBinaryString(file);
    }
  }

_handleReaderLoaded(readerEvt) {
    var binaryString = readerEvt.target.result;
    this.base64textString= btoa(binaryString);
    if(!!this.base64textString){
      // Do your stuff with the base64 
    }
}

我个人在我的应用程序中使用了此代码，并且工作正常。遗憾的是，我无法在if(!!this.base64textString)部分上向您展示更多代码，因为这只是将图像存储在数据库中的服务调用。

Answer 2

使用引导程序时，对于弹出窗口，可以使用引导程序模式。

在您的html中进行以下更改，

添加data-toggle="modal" data-target="#myModal"

<img src="https://www.bpimaging.com/assets/uploads/2015/02/business-portrait-photography-man.jpg" style="width: 56px;max-height: 56px;clip-path: circle(22px at center);" class="mr-3 d-none d-sm-block" alt="..." data-toggle="modal" data-target="#myModal">

然后包括以下内容，

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Profile information</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
          <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>

此处是一个工作示例：https://www.bootply.com/fzlrwIyyXK

如果单击“图像图标”，则图标应可单击，并且应打开一个弹出窗口[对话框]以上传新图像

2 个答案: