How do I make an image act as a upload file button : <p>I want to make a image act like a button that when pressed it allows me to upload another image.</p>

<p>What I have right now is the part in the snippet but I want to make it pull a image from my server to act as the button and then run some ajax to not have to reload the page then display the image that was chosen (the previous image should change to the one that was chosen).</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.Uploadbtn {
  position: relative;
  overflow: hidden;
  padding: 10px 20px;
  text-transform: uppercase;
  color: #fff;
  background: #000066;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  width: 100px;
  text-align: center;
  cursor: pointer;
}
.Uploadbtn .input-upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Uploadbtn"&gt;
  &lt;input type="file" class="input-upload" /&gt;
  &lt;span&gt;IMAGE&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
