title: User Profile photo, with clickable icon in the corner to upload photo - html
body: <p>I want to implement a user profile photo in the navbar of my web app, to be more specific I wish to have a placeholder <a href="http://i.stack.imgur.com/dolAE.png" rel="nofollow">see placeholder</a></p>
  
  <p>And then put a camera icon on the top right corner of the circle: <a href="http://i.stack.imgur.com/XMojX.png" rel="nofollow">see camera icon</a></p>
  
  <p>When someone clicks on the camera icon they can upload a photo to change their profile picture, in any photo format. Here is what I have but the result gives me a messy output, with "choose file", the name of the file, and "submit". I don't want any of this - just the round placeholder icon where the photo file will be shown, and the small camera icon on the top right of the photo circle.</p>
  
  <pre><code>&lt;div class="row"&gt;
                &lt;div class="col-sm-6 col-md-4"&gt;
                  &lt;div class="img-circle usericon"&gt;
                    &lt;img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221879682418?authkey=CJPV_OKHvczjSw" class="img-circle img-responsive" width="100" height="100"&gt;
                    &lt;div&gt;
                      &lt;img src="https://plus.google.com/photos/114809861514342788109/album/6306090224289882481/6306090221856483314?authkey=CJPV_OKHvczjSw"&gt;
                    &lt;/div&gt;
                    &lt;div class="caption"&gt;
                      &lt;form action="demo_form.asp"&gt;
                        &lt;input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*"&gt;
                        &lt;input type="submit"&gt;
                      &lt;/form&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I uploaded the icons to google plus, so that is why the src is a google plus link. Many thanks in advance</p>