Question

我正在Angular 2中开发一个网站。我希望能够通过点击字体中的图标来上传图像，但是我在执行此操作时遇到了问题。当我使用标签时，我可以上传图像，但现在当使用字体真棒图标时我无法

我现在拥有的：

＆＃13;

 #pic {
 border-radius: 200px;
 width: 200px;
 height: 200px;
 background-size: 240px;
 border-style: none;
 border: 2px solid black;
 outline: none;
 cursor: pointer;
 }

 #pencilicon {
 position: absolute;
 margin-left: 85px;
 margin-top: 85px;
 font-size: 50px;
 color: #fff;
 visibility: hidden;
 opacity: 0;
 cursor: pointer;
 transition: opacity .2s, visibility .2s;
 }  

 #uploadinput{  
 position: absolute;
 opacity: 0;
 z-index: -1; 
 text-align: left;
 }

＆＃13;

 <div id="picture">
  <input type='file' (change)="readUrl($event)"id="uploadinput">
  <i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-
   hidden="true">     </i>
  <img [src]="imageurl" id="pic" >
  </div>

＆＃13;

Answer 1

您必须在页面中包含字体真棒库，并提供相应的图标：

<i class="fa fa-upload"></i>。

请参阅下面的代码段，了解您的要求的示例和演示。

＆＃13;

input[type="file"].novisible {
    display: none;
}
input[type="file"].novisible + label {
 width:200px;
 height:200px;
 border-radius:50%;
 border:2px solid #999;
 display:inline-flex;
 justify-content:center;
 align-items:center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="file" class="novisible" id="file_upload">
<label for="file_upload" class="btn btn-md btn-teak"><i class="fa fa-upload"></i> <span>Upload</span></label>

＆＃13;

Answer 2

您是否尝试过将图标放入标签中？ Personnaly我喜欢（与Ember.js）

<input type='file' (change)="readUrl($event)"id="uploadinput">
<label for="uploadinput">
  <i class="fa fa-pencil-square-o" for="uploadinput" id="pencilicon" aria-hidden="true"></i>
  <span>{{uploadLabel}}</span> 
  <!-- This is then switched to file name -->
</label>

CSS：

input[type="file"] {
  position: absolute;
  left: -9999%;

  & + label {
    // your label style
  }
}

Answer 3

适合您的方法附加到具有z-index -1的输入，现在无法单击它。

将z-index更改为999，然后单击圆圈的顶部边框。

单击圆圈而不是输入时，应运行您的方法。

使用font awesome图标作为uploadlabel

3 个答案: