我想在我的网络应用程序的导航栏中实现用户个人资料照片,更具体地说,我希望有一个占位符 see placeholder
然后在圆圈的右上角放一个摄像头图标:see camera icon
当有人点击相机图标时,他们可以上传任何照片格式的照片来更改他们的头像。这是我所拥有的,但结果给我一个困惑的输出,带有“选择文件”、文件名和“提交”。我不需要这些 - 只需要显示照片文件的圆形占位符图标,以及照片圈右上角的小相机图标。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="img-circle usericon">
<img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221879682418?authkey=CJPV_OKHvczjSw" class="img-circle img-responsive" width="100" height="100">
<div>
<img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221856483314?authkey=CJPV_OKHvczjSw">
</div>
<div class="caption">
<form action="demo_form.asp">
<input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*">
<input type="submit">
</form>
</div>
</div>
</div>
</div>
我将图标上传到 google plus,所以这就是 src 是 google plus 链接的原因。非常感谢
最佳答案
隐藏您的表单并将标签绑定(bind)到文件输入...
<label for='picture'>
<img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221856483314?authkey=CJPV_OKHvczjSw">
</label>
<form action="demo_form.asp" style='display: none;'>
<input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*" id='picture'>
<input type="submit">
</form>
关于html - 用户个人资料照片, Angular 落有可点击图标以上传照片 - html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38335313/