Try adding a success event to your fileupload. If you register a success, then just replace the picture with the one already in your jqXHR
object. Not sure what plugin you're using but that shouldn't be very hard to accomplish.
image is not replaced after uploading is finished
-
21-07-2023 - |
Question
I have an ajax uploader in my site that uploads the image but i have to refresh the page in order to view that uploaded image. How i can avoid this refresh? My js is
$(function(){
var ul = $('#editprofile-form ul');
$('#drop a').click(function(){
// Simulate a click on the file input button
// to show the file browser dialog
$(this).parent().find('input').click();
});
// Initialize the jQuery File Upload plugin
$('#editprofile-form').fileupload({
// This element will accept file drag/drop uploading
dropZone: $('#drop'),
// This function is called when a file is added to the queue;
// either via the browse button, or via drag/drop:
add: function (e, data) {
var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
// Append the file name and file size
tpl.find('p').text(data.files[0].name)
.append('<i>' + formatFileSize(data.files[0].size) + '</i>');
// Add the HTML to the UL element
data.context = tpl.appendTo(ul);
// Initialize the knob plugin
tpl.find('input').knob();
// Listen for clicks on the cancel icon
tpl.find('span').click(function(){
if(tpl.hasClass('working')){
jqXHR.abort();
}
tpl.fadeOut(function(){
tpl.remove();
});
});
// Automatically upload the file once it is added to the queue
var jqXHR = data.submit();
var img = document.getElementById('image-placeholder').innerHTML ;
console.log(img);
},
progress: function(e, data){
// Calculate the completion percentage of the upload
var progress = parseInt(data.loaded / data.total * 100, 10);
// Update the hidden input field and trigger a change
// so that the jQuery knob plugin knows to update the dial
data.context.find('input').val(progress).change();
if(progress == 100){
data.context.removeClass('working');
}
},
fail:function(e, data){
// Something has gone wrong!
data.context.addClass('error');
}
});
// Prevent the default action when a file is dropped on the window
$(document).on('drop dragover', function (e) {
e.preventDefault();
});
// Helper function that formats the file sizes
function formatFileSize(bytes) {
if (typeof bytes !== 'number') {
return '';
}
if (bytes >= 1000000000) {
return (bytes / 1000000000).toFixed(2) + ' GB';
}
if (bytes >= 1000000) {
return (bytes / 1000000).toFixed(2) + ' MB';
}
return (bytes / 1000).toFixed(2) + ' KB';
}
});
and my form is
<div class="adminform_wrapp">
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'editprofile-form',
'enableAjaxValidation' => false,
'clientOptions' => array(
'validateOnSubmit' => true,
),
'enableClientValidation' => true,
'focus' => array($model, 'first_name'),
'htmlOptions' => array(
'enctype' => 'multipart/form-data'
)
));
//echo $form->errorSummary($model);
?>
<div class="adminform_row">
<?php echo $form->errorSummary($model); ?>
</div>
<div class="adminform_row errorSummary">
<?php echo $response_msg; ?>
</div>
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_First_Name">First Name: <span class="required">*</span></label>
<?php echo $form->textField($model, 'first_name', array('value' => $data['first_name'])); ?>
<?php $form->error($model, 'first_name'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Last_Name">Last Name: <span class="required">*</span></label>
<?php echo $form->textField($model, 'last_name', array('value' => $data['last_name'])); ?>
<?php $form->error($model, 'last_name'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Email">Email: <span class="required">*</span></label>
<?php echo $form->textField($model, 'email', array('value' => $data['email'], 'readonly' => true)); ?>
<?php $form->error($model, 'email'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Phone_No">Phone No: <span class="required">*</span></label>
<?php echo $form->textField($model, 'phone_no', array('value' => $data['phone_no'])); ?>
<?php $form->error($model, 'phone_no'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label>Username:</label>
<span class="profile-username"><?php echo $data['username']; ?></span> </div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label>Edit Profile picture:</label>
<span class="image-placeholder" id="image-placeholder">
<?php
if (file_exists(Yii::getPathOfAlias('webroot') . '/themes/karmora/images/users/' . $data['image']) && $data['image'] != null) {
$u_image_path = $this->theme_baseurl . '/images/users/' . $data['image'];
} else {
$u_image_path = $this->theme_baseurl . '/images/users/default-thumb.png';
}
?>
<img src="<?php echo $u_image_path; ?>" style="width:96px; height:96px;"/>
</span>
<div id='file_browse_wrapper'>
<?php
//echo $form->labelEx($model, 'image');
echo $form->fileField($model, 'upl', array('id' => 'file_browse'));
echo $form->error($model, 'upl');
?>
</div>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<?php echo $form->labelEx($model, 'Address', array('class' => 'fieldname')); ?>
<?php echo $form->textField($model, 'address', array('value' => $data['address'])); ?>
<?php $form->error($model, 'address'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Country">Country: <span class="required">*</span></label>
<select class="error" onchange="print_state('Users_state', this.selectedIndex);" id="Users_country" name ="Users[country]"></select>
<?php $form->error($model, 'country'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_State">State: <span class="required">*</span></label>
<select name ="Users[state]" id ="Users_state"></select>
<script language="javascript">print_state("Users_state", '', "<?php echo $data['state'] ?>");</script>
<?php $form->error($model, 'state'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_City">City: <span class="required">*</span></label>
<?php echo $form->textField($model, 'city', array('value' => $data['city'])); ?>
<?php $form->error($model, 'city'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<label class="fieldname required" for="Users_Zipcode">Zipcode: <span class="required">*</span></label>
<?php echo $form->textField($model, 'zipcode', array('value' => $data['zipcode'])); ?>
<?php $form->error($model, 'zipcode'); ?>
</div>
<!--adminform_row-->
<!--adminform_row-->
<div class="adminform_row">
<input type="submit" class="adminupdate_btn" value="Update">
<input type="reset" class="admincancel_btn" value="Cancel">
</div>
<!--adminform_row-->
<?php $this->endWidget(); ?>
</div>
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow