На моей странице asp.net у меня есть элемент управления загрузкой изображений, где пользователи могут загружать туда фото профиля. я хочу, чтобы когда пользователь просматривал свою фотографию, должен отображаться немедленный предварительный просмотр. Есть ли для этого какой-либо элемент управления изображением ajax или как я могу это реализовать?
Предварительный просмотр загруженного изображения на панели обновлений
Ответы (4)
javascript не позволит вам получить доступ к клиентскому изображению, пока оно не будет загружено, поэтому ваш единственный вариант - показать изображение после того, как файл был загружен. Я не уверен, но вы, возможно, сможете делать то, что хотите, создав элемент управления загрузкой файлов во флэш-памяти, но я не знаю флэш-памяти, поэтому я не могу вам с этим помочь.
Вы должны загрузить файл, прежде чем сможете получить к нему доступ. Для загрузки асинхронного файла вам понадобится более одного UpdatePanel
. В этом примере кода показан трюк, позволяющий выполнить загрузку без перезагрузки страницы. Наконец, чтобы сделать предварительный просмотр, вам нужно будет создать функцию javascript для изменения URL-адреса изображения на странице.
Вот пример проекта.
Надеюсь, это поможет, я создал небольшую суть, чтобы продемонстрировать, как вы можете попросить пользователя загрузить изображение, а затем сразу же отобразить изображение до того, как начнется какой-либо процесс на стороне сервера:
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>