Question

我想在我的网络应用的导航栏中实现用户个人资料照片，更具体一点我希望有一个占位符see placeholder

然后在圆圈的右上角放置一个相机图标：see camera icon

当有人点击相机图标时，他们可以上传照片以更改任何照片格式的个人资料照片。这是我所拥有的，但结果给了我一个混乱的输出，＆＃34;选择文件＆＃34;，文件的名称，＆＃34;提交＆＃34;。我不想要任何这些 - 只是显示照片文件的圆形占位符图标，以及照片圈右上角的小相机图标。

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

用户个人资料照片，角落里的可点击图标上传照片 - HTML

1 个答案: