Question

好吧不知道该怎么办，老实说我有点失落。我想要做的是通过jQuery将文件上传到网站并将其推送到PHP，然后删除原始图像文件并制作一个名为header.jpg的副本并将其推送到需要的位置。那部分没有问题。这里的问题是如果header.jpg图像是背景，我将如何更新div元素？

注意：无论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>

jquery更新div背景元素

1 个答案:

更新