// input specification to method post
// Recommended: add inside ~style="display:none;" to hide it.
<input type="file" class="form-control img_location" id="img_location" accept="image/*">

// replaced file upload method to camera-icon.png
<img src="(MyFoderHere)/camera-icon.png" id="clickToUpload" style="cursor:pointer" width="32px" />

// below is the function triggered
    <script>
				  $(document).ready(function(e) {
						$(".showonhover").click(function(){
							$("#selectfile").trigger('click');
						});
					});

				var input = document.querySelector('input[type=file]'); // see Example 4

				input.onchange = function () {
				  var file = input.files[0];

				  drawOnCanvas(file);   // see Example 6
				  displayAsImage(file); // see Example 7
				};

				function drawOnCanvas(file) {
				  var reader = new FileReader();

				  reader.onload = function (e) {
					var dataURL = e.target.result,
						c = document.querySelector('canvas'), // see Example 4
						ctx = c.getContext('2d'),
						img = new Image();

					img.onload = function() {
					  c.width = img.width;
					  c.height = img.height;
					  ctx.drawImage(img, 0, 0);
					};

					img.src = dataURL;
				  };

				  reader.readAsDataURL(file);
				}

				function displayAsImage(file) {
				  var imgURL = URL.createObjectURL(file),
					  img = document.createElement('img');

				  img.onload = function() {
					URL.revokeObjectURL(imgURL);
				  };

				  img.src = imgURL;
				  document.body.appendChild(img);
				}

				$("#clickToUpload1").click(function () {
					$("#img_location").trigger('click');
				});
				/*
				$("#clickToUpload2").click(function () {
					$("#file2").trigger('click');
				});
				$("#clickToUpload2").click(function () {
					$("#file3").trigger('click');
				});
				*/
				</script>