How to show Image view after upload and delete view image using eajaxupload extension

Hi Friends, In this tutorial you can use the eajaxupload-extension ,

After image upload, How to see image view after uploaded like below image

using this extension

1) copy that code on view file

but make sure your uploaded image file is correct

<div class="row">
		<?php echo $form->labelEx($model,'liquor_logo'); ?>
		<?php $this->widget('ext.EAjaxUpload.EAjaxUpload',
					   'sizeLimit'=>10*1024*1024,// maximum file size in bytes
					   'onComplete'=>"js:function(id, fileName, responseJSON){
										  var filename = responseJSON['filename'];
										  var success = responseJSON['success'];
											if(success == true)
												 jQuery('.reg_div_new .uploadClass').html(filename);
												 jQuery('.reg_div_new .uploadClass').removeClass('displaynone');
												 jQuery('.reg_div_new .deleteImage').removeClass('displaynone');
												 jQuery('.reg_div_new #liquor_add_logo').val(filename);
												 jQuery('#uploadFile_new .qq-upload-button input').attr('disabled','disabled'); 
																		 jQuery('#image').html('<img class=\'margin_t10\' height=\'50px\' src=" . Yii::app()->baseUrl . '/upload/liquor/' . "'+filename+'><div class=\'deleteImage active float_r\'><img onclick=\'removeLiquorImage(\"'+filename+'\");\' src=" . Yii::app()->baseUrl . "/images/delete_image.png alt=\'Remove image\'></div>')
												 jQuery('.reg_div_new #liquor_add_logo').val('');
												 jQuery('.reg_div_new .uploadClass').html('');
												 jQuery('.reg_div_new .uploadClass').addClass('displaynone');
												 jQuery('.reg_div_new .deleteImage').addClass('displaynone');
												 jQuery('#uploadFile_new .qq-upload-button input').removeAttr('disabled','disabled'); 
										 'typeError'=>"{file} has invalid extension. Only {extensions} are allowed.",
										 'sizeError'=>"{file} is too large, maximum file size is {sizeLimit}.",
										 'minSizeError'=>"{file} is too small, minimum file size is {minSizeLimit}.",
										 'emptyError'=>"{file} is empty, please select files again without it.",
										 'onLeave'=>"The files are being uploaded, if you leave now the upload will be cancelled."
					   'showMessage'=>"js:function(message){ alert(message); }"
		)); ?>  
		<div id="image"></div>
		<?php echo $form->error($model,'liquor_logo'); ?>
         <div class="reg_div_new"> 
			<?php echo $form->hiddenField($model, 'liquor_logo',array('id'=>'liquor_add_logo')); ?>
0 1
Viewed: 60 479 times
Version: 1.1
Category: How-tos
Written by: Ankit Modi
Last updated by: samdark
Created on: Jul 17, 2014
Last updated: 5 years ago
Update Article


View all history

Related Articles