Image Upload Preview in Update Panel

Question

In my asp.net page I have an image upload control where users can upload there profile photo. what I want is when user browse his/her photo an immediate preview should displayed. Is there any ajax image control for that or how can I implement that?

Answer 1

javascript won't allow you to access the clients image until it has been uploaded so your only option is to show the image after the file has been uploaded. I'm not sure but you may be able to do what you want by creating a fileupload control in flash but I don't know flash so I can't help you with that.

Answer 2

You have to upload the file before you can access it. To make an async file upload you need more than one UpdatePanel. This code example shows a trick to make an upload without reloading the page. Finally to make your preview you would need to make a javascript function to change the url of an image on the page.

Answer 3

Here is a sample project.

Answer 4

Hope this helps, I created a small gist to demonstrate how you can ask the user to upload an image and then immediately display the image before any server side process initiates:

var Image_Upload_Preview = function( file_input, image_element ){

    /**
     * Checks for supported features
     * @returns {boolean}
     */
    this.is_supported = function(){

        if( ! FileReader instanceof Function ){
            console.error(':( Your browser noes not support the FileReader...');
            return false;
        }
    };


    /**
     * Checks the inputs provided
     * @returns {boolean}
     */
    this.validate_inputs = function(){

        /**
         * Fail if:
         * 1. Not a HTML Input Element
         * 2. Not a File Input Element
         *
         */
        if( ! $(file_input).get(0) instanceof HTMLInputElement || $(file_input).first().attr('type') != 'file' ){
            console.error( 'Invalid Element provided...' );
            return false;
        }

        /**
         * Fail if:
         * 1. Image Element provided is invalid
         */
        if( ! $(image_element).get(0) instanceof HTMLImageElement ){
            console.error( 'Invalid Image Element provided...' );
            return false;
        }

    };


    /**
     * Only proceed if all the preliminary checks have passed
     */
    if( this.is_supported() || this.validate_inputs() ){
        return false;
    }


    /**
     * Set the file input to only accept images
     */
    $(file_input).attr('accept','image/*');


    $(file_input).change(function(){

        /**
         * Fail if:
         * 1. 'files' data is non existent
         * 2. 'files' data has no data in it
         */
        if( !this.files || this.files.length < 1 ){
            console.error('No files data exists for this file input...');
            return false;
        }


        var file_reader = new FileReader();

        file_reader.onload = function( reader_result ) {

            var image_result = null;

            /**
             * Legacy lookup for the result
             */
            image_result = reader_result.target && reader_result.target.result ? reader_result.target.result : image_result ;
            image_result = !image_result && reader_result.srcElement && reader_result.srcElement.result ? reader_result.srcElement.result : image_result ;

            $( image_element ).attr( 'src', image_result );
        };

        file_reader.readAsDataURL( this.files[0] );
    });

};


$(document).ready(function(){

    /**
     * Example Usages
     */
    // new Image_Upload_Preview( document.getElementById('file_input_demo'), $('img') );
    new Image_Upload_Preview( $('input[type=file]'), $('img') );
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.2/css/uikit.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="uk-container uk-container-center uk-text-center">
  <div class="uk-thumbnail uk-margin-top">
    <img class="uk-margin" src="https://placeholdit.imgix.net/~text?txtsize=56&txt=Select%20Image&w=600&h=400">
    <form>
      <label class="uk-button uk-button-primary uk-button-large">
                  <span>Select Image</span>
                  <input type="file" accepts="image/*" id="file_input_demo" class="uk-invisible uk-position-absolute" />
              </label>
    </form>

  </div>
</div>