Skip to main content

Preview image in base64 format using jQuery on change input file

You can preview images in Base64 encoded format using jQuery on the change input file.

  • Display image in base64 format on change input file

    <h1> Preview image in base64 formats </h1>
    <input type="file" name="image" id="image"/>
    <div class="previewWrapper" style="height:200px; width:300px;">
        <img id="previewImage" style="height:100%; width:100%;">
    <script src=""></script>
            $("body").on("change", "#image", function(e){
                var file =[0];
                var mediabase64data; 
                    mediabase64data => $('#previewImage').attr('src', mediabase64data)
        function getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
  • Back to code snippet queries related jquery