WebMasterCampus
WEB DEVELOPER Resources

JavaScript Preview an Image Before It Is Uploaded

JavaScript Preview an Image Before It Is Uploaded


JavaScript Preview an Image Before Uploaded Example

<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>

References

URL.createObjectURL

URL.revokeObjectURL

event.target.files

Created with love and passion.