替换后在模态窗口中刷新图像而不关闭模态

时间:2019-03-14 17:21:55

标签: php jquery bootstrap-modal

更换后,我尝试在模式窗口中刷新图像。 如果我在不关闭模式窗口的情况下重复操作,我的<div>将显示所有连续的图片,如下所示:

Example

jQuery代码:

$(document).ready(function(){
    $('#img_logo_content').change(function(){
        var fd = new FormData();
        var files = $('#img_logo_content')[0].files[0];
        fd.append('file',files);
        fd.append('request',1);

        // AJAX request
        $.ajax({
            url: 'upload.php',
            type: 'post',
            cache: false,
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                if(response != 0){
                    // Show image preview
                     $('#logo-preview').append("<img src='"+response+"'  height='50' style='display: inline-block;'>");
                }else{
                    alert('file not uploaded');
                }
            }
        });
    });
});

我的模态div

<div class="form-group">
    <label for="img_logo_content" class="col-sm-4 control-label">Votre logo</label>
    <div class="col-sm-8">
        <!-- Display logo -->
        <div id="logo-preview"></div>
        <input type="file" class="form-control" id="img_logo_content" name="img_logo_content" placeholder="Votre Logo">
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

将.append()更改为.html()

$('#logo-preview').html("<img src='"+response+"'  height='50' style='display: inline-block;'>");

这应该替换图像,而不是附加到该元素的末尾,但是,这将替换该元素中的所有html。不确定是否需要。