javascript - 上传完成后图片不被替换

Question

我的网站中有一个 ajax uploader 可以上传图像，但我必须刷新页面才能查看上传的图像。我怎样才能避免这种刷新？我的js是

$(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';
}

});

我的表格是

<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>

Answer 1

尝试向您的文件上传添加成功事件。如果注册成功，只需将图片替换为 jqXHR 对象中已有的图片即可。不确定您使用的是什么插件，但这应该不难实现。