Skip to main content

How to preview image before uploading in jQuery

You can preview images before uploading them in jQuery. You have to get the image URL (BLOB URL or Base64 format) from the input file and append it to the targeted image.

  • Preview image in BLOB URL format on change input type file

    <h1> Image Preview on choose file  in BLOB url format </h1>
    <input type="file" name="image" id="image"/>
    <div id="previewWrapper" style="height:200px; width:300px;">
        <img id="previewImage" style="height:100%; width:100%;">
    </div>
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on("change", "#image", function(e){
                previewImage(this, 'previewImage');
            });
        })
        
        function previewImage(input, targetDivToShow) {
            var files = input.files;
            var url;
            var done = function (url) {
                $('#'+targetDivToShow).attr('src', url);
            };
            
            if (input.files && input.files[0]) {
                file = input.files[0];
                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    }
                    reader.readAsDataURL(file);
                }
            }
        }
    </script>
    
  • 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%;">
    </div>
    
    //Script 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("body").on("change", "#image", function(e){
                var file = e.target.files[0];
                var mediabase64data; 
                getBase64(file).then(
                    mediabase64data => $('#previewImage').attr('src', mediabase64data)
                );
            });
        })
        
        function getBase64(file) {
            return new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = error => reject(error);
            });
        }
    </script>
    
  • Back to code snippet queries related jquery