2

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?

4

4 回答 4

0

您必须先上传文件，然后才能访问它。要进行异步文件上传，您需要多个UpdatePanel. 此代码示例显示了在不重新加载页面的情况下进行上传的技巧。最后，要进行预览，您需要创建一个 javascript 函数来更改页面上图像的 url。

于 2010-09-27T18:23:52.223 回答
0

这是一个示例项目。

于 2010-10-30T00:33:37.053 回答
0

javascript 在上传之前不允许您访问客户端图像，因此您唯一的选择是在文件上传后显示图像。我不确定，但你可以通过在 Flash 中创建文件上传控件来做你想做的事，但我不知道 Flash，所以我无法帮助你。

于 2010-09-27T16:40:39.710 回答
0

希望这会有所帮助，我创建了一个小要点来演示如何要求用户上传图像，然后在任何服务器端进程启动之前立即显示图像：

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>

于 2017-04-10T04:50:43.920 回答