Preview an Image by the side before uploading

Question

I want to be able to preview my images before upload like this and I have been doing research online and looking at past questions which is kind of related to mine, But each time I try to copy the JS code and do some modifications it doesn't really work for me. Probably, because I'm still trying to learn JavaScript and J query Any one with suggestions on methods of achieving this?

Here are my HTML and CSS

 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--; });

 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: "×"; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>

Answer 1

on reference of This link which it is assumed to be a duplicate of

 $(function(){ $("#Photofile").change(function() { if (this.files && this.files[0]){ var reader = new FileReader(); reader.onload = function(e) { $('#imageDisplay,#imageDisplay1,#imageDisplay2').attr('src', e.target.result); } reader.readAsDataURL(this.files[0]); } }); });

 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; margin-top:50px; } 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: "×"; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form> <img id="imageDisplay" alt="uploaded Image"/> <img id="imageDisplay1" alt="uploaded Image"/> <img id="imageDisplay2" alt="uploaded Image"/> <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>