asp.net - 更新パネルでの画像アップロードプレビュー

Question

私のasp.netページには、ユーザーがプロフィール写真をアップロードできる画像アップロードコントロールがあります。私が欲しいのは、ユーザーが自分の写真を閲覧するときに、すぐにプレビューが表示されるようにすることです。そのためのajaxイメージコントロールはありますか、またはそれをどのように実装できますか？

Answer 1

javascript では、クライアントの画像がアップロードされるまでアクセスできないため、唯一のオプションは、ファイルがアップロードされた後に画像を表示することです。わかりませんが、フラッシュでファイルアップロードコントロールを作成することで、必要なことを実行できるかもしれませんが、フラッシュを知らないので、それについてはお手伝いできません。

Answer 2

これがサンプルプロジェクトです。

Answer 3

アクセスする前に、ファイルをアップロードする必要があります。非同期ファイルのアップロードを行うには、複数の が必要ですUpdatePanel。このコード例は、ページをリロードせずにアップロードするためのトリックを示しています。最後に、プレビューを作成するには、ページ上の画像の URL を変更する JavaScript 関数を作成する必要があります。

Answer 4

これがお役に立てば幸いです。ユーザーに画像をアップロードするように依頼し、サーバー側のプロセスが開始される前にすぐに画像を表示する方法を示す小さな要点を作成しました。

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>