Preview an Image withing input Frame before uploading

[kamseudouglas]

I saw one preview image and delete before uploading design online and I’ve been trying to do it but nothing really works. I want to be able to preview an image within the input element frame. Something like this:

Sorry my english is not that good. I tried doing it this way

HTML CODE

<form>
    <div class="row row-images">
      <label for="image">Images*</label>                   
      <div class="column image_container">
            <div class="post-image-collection">
            <label id="list">

            </label>
          <label class="post-image post-image-placeholder mrm mts empty">
            <input type="file" id="Photofile" name="images[]" required="required" multiple />
      <span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
      <p class="uppercase">Photo</p>

    </label>
    </div>                        
          </div>
         </form>

CSS CODE

 form .post-image-collection {
        margin: -20px 0px 0px -20px;
        overflow: hidden;
        }
        form .post-image {
        position: relative;
        float: left;
        height: 152px;
        width: 170px;
        background: #f2f2f2;
        border: 1px dashed #ccc;
        padding: 0;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        }
        .mrm {
        margin-right: 20px;
        }
        .mts {
        margin-top: 10px;
        }
        form .post-image img {
        max-width: 80px;
        max-height: 80px;
        width: auto;
        height: auto;
        vertical-align: top;
        border-radius: 3px;
        overflow: hidden;
        }
        form .post-image .icon-camera {
        display: none;
        }
        form .post-image input {
        position: absolute;
        z-index: 2;
        opacity: 0;
        width: 100%;
        height: 100%;
        }
        form .post-image.empty {
        position: relative;
        float: left;
        height: 130px;
        width: 130px;
        background: #f2f2f2;
        border: 1px dashed #ccc;
        padding: 0;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        vertical-align: top;
        }

        form .post-image.empty .icon-camera {
        display: block;
        height: 30px;
        line-height: 30px;
        left: 40%;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 30px;
        cursor: inherit;
        margin: -15px 0px 0px -15px;
        }
        form .post-image.empty .icon-camera img {
        height: 60px;
        width: 60px;
        }
        form .post-image.empty input {
        cursor: pointer;
        }

        form .post-image p, .file_container-orange p {
        margin: 10px 0;
        margin: 1rem 0;
        text-align: center;
        font-family: "OpenSansSemiBold",sans-serif;
        }
        .uppercase {
        text-transform: uppercase;
        }
        #list{
        float: left;
        }
        .thumb {
        height: 130px;
        width: 130px;
        margin-right: 20px;
        margin-top: 10px;
        }
        .remove_img_preview {
        position: relative;
        top: -46px;
        right: 40px;
        font-size: 20px;
        line-height: 1;
        padding: 4px 6px;
        background: white;
        border-radius: 0px 0px 0px 3px;
        text-align:center;
        cursor:pointer;
        }
        .remove_img_preview:before {
        content: "×";
        }

Javascript

    var count=0;
	function handleFileSelect(evt) {
		var $fileUpload = $("input#Photofile[type='file']");
		count=count+parseInt($fileUpload.get(0).files.length);
		
		if (parseInt($fileUpload.get(0).files.length) > 4 || count>3) {
			alert("You can only upload a maximum of 3 photos");
			count=count-parseInt($fileUpload.get(0).files.length);
			evt.preventDefault();
			evt.stopPropagation();
			return false;
		}
		var files = evt.target.files;
		for (var i = 0, f; f = files[i]; i++) {
			if (!f.type.match('image.*')) {
				continue;
			}
			var reader = new FileReader();

			reader.onload = (function (theFile) {
				return function (e) {
					var span = document.createElement('span');
					span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
					document.getElementById('list').insertBefore(span, null);
				};
			})(f);

			reader.readAsDataURL(f);
		}
	}
	
	$('#Photofile').change(function(evt){
		handleFileSelect(evt);
	});	 

	$('#list').on('click', '.remove_img_preview',function () {
		$(this).parent('span').remove();
        
        //this is not working...
        var i = array.indexOf($(this));
        if(i != -1) {
            array.splice(i, 1);
        }
        // tried this too:
        //$(this).parent('span').splice( 1, 1 );
        
        count--;
	});

Any hekp?