display image with file upload
<head> <title>Image Upload</title> <style> body { margin:0px; } .center { display:inline; margin: 3px; } .form-input { width:100px; padding:3px; background:#fff; border:2px dashed dodgerblue; } .form-input input { display:none; } .form-input label { display:block; width:100px; height: auto; max-height: 100px; background:#333; border-radius:10px; cursor:pointer; } .form-input img { width:100px; height: 100px; margin: 2px; opacity: .4; } .imgRemove{ position: relative; bottom: 114px; left: 68%; background-color: transparent; border: none; font-size: 30px; outline: none; } .imgRemove::after{ content: ' \21BA'; color: #fff; font-weight: 900; border-radius: 8px; cursor: pointer; } .small{ color: firebrick; } </style> </head> <body> <div class="image-upload-one"> <div class="center"> <div class="form-input"> <label for="file-ip-1"> <img id="file-ip-1-preview" src="https://i.ibb.co/ZVFsg37/default.png"> <button type="button" class="imgRemove" onclick="myImgRemoveFunctionOne()"></button> </label> <input type="file" name="img_one" id="file-ip-1" accept="image/*" onchange="showPreviewOne(event);"> </div> <small class="small">Use the ↺ icon to reset the image</small> </div> </div> <script> function showPreviewOne(event){ if(event.target.files.length > 0){ let src = URL.createObjectURL(event.target.files[0]); let preview = document.getElementById("file-ip-1-preview"); preview.src = src; preview.style.display = "block"; } } function myImgRemoveFunctionOne() { document.getElementById("file-ip-1-preview").src = "https://i.ibb.co/ZVFsg37/default.png"; } </script> </body>
