用户个人资料照片，角落带有可点击图标以上传照片 - html

Question

我想在我的网络应用的导航栏中实现用户个人资料照片，更具体地说，我希望有一个占位符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 链接的原因。非常感谢提前

Answer 1

隐藏您的表单并将标签绑定到文件输入...

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