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

You are viewing revision #4 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#3)next (#5) »

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

After image upload, How to see image view after uploaded like below image http://puu.sh/aeSkQ/cd078d7519.jpg

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',
		array(
				'id'=>'uploadFile_new1',
				'config'=>array(
					   'action'=>Yii::app()->createUrl('vendor/liquor/upload'),
					   'allowedExtensions'=>array("jpg","jpeg","gif","png"),
					   '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>')
											}else{
												 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'); 
											}
									}",
					   'messages'=>array(
										 '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>
            
         <div class="reg_div_new"> 
			<?php echo $form->hiddenField($model, 'liquor_logo',array('id'=>'liquor_add_logo')); ?>
</div>
0 1
3 followers
Viewed: 60 524 times
Version: Unknown (update)
Category: How-tos
Written by: Ankit Modi
Last updated by: samdark
Created on: Jul 17, 2014
Last updated: 5 years ago
Update Article

Revisions

View all history

Related Articles