更新面板中的圖片上傳預覽

Question

在我的asp.net頁面中，我有一個圖片上傳控件，用戶可以在其中上傳個人資料照片。我想要的是當用戶瀏覽他/她的照片時，應該顯示立即預覽。有沒有任何Ajax圖像控制，或者我該如何實現？

Answer 1

javascript將不允許您訪問客戶端圖像，直到它已經上傳，所以您唯一的選擇是在文件上傳後顯示圖像。我不確定，但你可以通過在Flash中創建一個文件上傳控件來做你想做的事，但我不知道閃光燈，所以我不能幫你。

Answer 2

你必須上傳文件，然後才能訪問它。要進行異步文件上傳，您需要多個UpdatePanel。這code example顯示了一個技巧，無需重新加載頁面進行上傳。最後，要進行預覽，您需要製作一個JavaScript功能來更改頁面上圖像的網址。

Answer 3

Here是一個示例項目。

Answer 4

希望這有助於我創建了一個小gist來演示如何要求用戶上傳的圖像，然後之前的任何服務器端進程啓動立即顯示圖像：

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>