title: get image and upload/save it in server location
body: <p>I have an beego application in which i have a requirement of uploading a image from client for to server location.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Till now I have tried the following script
  $("#fileupload").on("click",function(){
    $("#my_file").click();
    userImage = document.getElementById('fileupload');
    imgData = getBase64Image(userImage);
    localStorage.setItem("imgData", imgData);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Html where i have kept option for image upload--&gt;
  &lt;ul&gt;
    &lt;li style="margin-top:5px;"&gt;  .Hii vijay  &lt;/li&gt;
    &lt;li&gt;&lt;input type="file" id="my_file" style="display: none;" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img id="fileupload" name="filetoupload" src="../../static/img/img.png"&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>using this script, when i click on empty image(click here to add) it is displaying a browse file option.After selecting the image no action taking place.
  My requirement is on selection of image from browse option, the selected image should be saved in server location.</p>