JavaScript Preview an Image Before It Is Uploaded

    <style>
        img[src=""] {
            display: none;
        }
    </style>

    <form runat="server">
        <input accept="image/*" type='file' id="selectImage" />
        <img id="displayImage" src="" alt="your image" />
    </form>

    <script>
        const selectImage = document.getElementById('selectImage');
        selectImage.onchange = evt => {
            console.log(selectImage.files)

            const file = selectImage.files[0]
            if (file) {
                displayImage.src = URL.createObjectURL(file)
            }

            displayImage.onload = function () {
                URL.revokeObjectURL(displayImage.src) // free memory
            }
        }

    </script>