jquery update div фоновый элемент

Question

Хорошо, не уверен, что делать, и я, честно говоря, немного растерялся.Я пытаюсь загрузить файл на сайт через jQuery и отправить его в PHP, который затем удаляет исходный файл изображения и создает его копию header.jpg, а затем перемещает туда, куда нужно.Эта часть работает без проблем.Проблема в том, как мне обновить элемент div, если изображение header.jpg является фоном?

Примечание: независимо от того, что img всегда будет header.jpg, но его нужно повторно кэшировать.по браузеру и передается пользователю без обновления страницы

Вот как выглядит заголовок div

<div id="headerEmpty"></div>
         <div id="pageName">
             <h2><?php echo $pageName; ?></h2>
         </div>
         <?php if ( $_SESSION['signed_in'] == true ) { ?>
         <div id="header" style="background-image:url(uploads/header.jpg);">
             <span class="edit" fn="header">
                 <img src="uploads/icon/16/018.png" />
             </span>
             <div class="fn_menu" style="display:none;"></div>
         </div>
         <?php } else { ?>
         <div id="header"></div>
         <?php } ?>

, а вот бит jquery, который отображает загрузчик и автоматически запускает процесс загрузки

$('#photoimg').live('change', function() { 

        $("#preview").html('');
        $("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm(
        { 
        target: '#header',
        success : function(data) {
        $("#header").html(data).fadeIn('fast');
        }           
        }).submit();
     });

Answer 1

Если вы хотите обновить изображение, измените его источник.Вы можете добавить отметку времени к источнику, чтобы она не поступала из кэша браузера.В PHP это будет что-то вроде:

<div id="headerEmpty"></div>
         <div id="pageName">
             <h2><?php echo $pageName; ?></h2>
         </div>
         <?php if ( $_SESSION['signed_in'] == true ) { ?>
         <div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
             <span class="edit" fn="header">
                 <img src="uploads/icon/16/018.png" />
             </span>
             <div class="fn_menu" style="display:none;"></div>
         </div>
         <?php } else { ?>
         <div id="header"></div>
         <?php } ?>

Отметку времени следует просто игнорировать, и изображение будет загружаться при каждом обновлении.Теперь обратите внимание, что фоновое изображение находится на элементе, который вы заменяете в HTML.Вы можете использовать jQuery для обновления url() изображения:

    success : function(data) {
        var theDate = new Date();
        $("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
    }    

Вы также можете использовать PHP для вывода элемента #header и использовать replaceWith() вместо .html():

    success : function(data) {
        $("#header").replaceWith(data).fadeIn('fast');
    }  

Это предполагает, что ваш вывод PHP теперь выглядит следующим образом:

     <div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
         <span class="edit" fn="header">
             <img src="uploads/icon/16/018.png" />
         </span>
         <div class="fn_menu" style="display:none;"></div>
     </div>