Question

在我的asp.net页面中，我有一个图像上传控件，用户可以在其中上传个人资料照片。我想要的是当用户浏览他/她的照片时，应该立即显示预览。是否有任何ajax图像控制或如何实现？

Answer 1

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

Answer 2

您必须先上传文件才能访问该文件。要进行异步文件上传，您需要多个UpdatePanel。此code example显示了在不重新加载页面的情况下进行上传的技巧。最后，为了进行预览，您需要制作一个javascript函数来更改页面上图像的URL。

Answer 3

Here是一个示例项目。

Answer 4

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

＆＃13;

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') );
});

＆＃13;

<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>

＆＃13;

更新面板中的图像上载预览

4 个答案: