将图像上传到子页面中的表单后，如何在主页上重新加载图像？

Question

我正在将 Tutor LMS 与 WordPress 一起使用。 有一个仪表板页面，它有子页面。 我有一个名为“我的组织”的子页面，允许用户更新表单并上传徽标和背景图像。 徽标和背景是用于主仪表板页面的图像，并显示在所有子页面的顶部。

好消息是，如果我更新表单字段并点击更新按钮，它将刷新，然后字段将在此后更新（为此获得了一些主要帮助）。 肮脏的事情是徽标和背景不会更新，除非我再次刷新。

这是屏幕录像

我一直在寻找解决方法，但似乎找不到任何东西。 我尝试使用

<script>
    window.opener.location.reload();
</script>

但它没有用。

如果你有线索，请告诉我！

这是我的名为“我的组织”的子页面的代码：

<?php

global $wpdb;

$user_id  = get_current_user_id();
$org_id = get_user_meta($user_id, '_org_id', true);

if (isset($_POST['update']) && wp_verify_nonce( $_POST['logo_url_nonce'], 'logo_url' ) && wp_verify_nonce( $_POST['backdrop_url_nonce'], 'backdrop_url' )) {
    
    $orgs = $wpdb->get_results($wpdb->prepare("SELECT * FROM `wp_organization` WHERE id = $org_id"));
    
    $user_org = null;
    foreach($orgs as $org) {
    $user_org = $org;
    }
    
    require_once( ABSPATH . 'wp-admin/includes/image.php' );
    require_once( ABSPATH . 'wp-admin/includes/file.php' );
    require_once( ABSPATH . 'wp-admin/includes/media.php' );
    
    if ($_FILES['logo_url']['size'] > 0) {
    $logo_attachment_id = media_handle_upload( 'logo_url', $_POST['post_id']);
    $logo_url = wp_get_attachment_url($logo_attachment_id);
    } else {
        $logo_url = $user_org->logo_url;
    }
    
    if ($_FILES['backdrop_url']['size'] > 0) {
    $backdrop_attachment_id = media_handle_upload( 'backdrop_url', $_POST['post_id']);
    $backdrop_url = wp_get_attachment_url($backdrop_attachment_id);
    } else {
        $backdrop_url = $user_org->backdrop_url;
    }
    
    $name = isset($_POST['org_name']) ? $_POST['org_name'] : "";
    $short = isset($_POST['shortname']) ? $_POST['shortname'] : "";
    $ind = isset($_POST['industry']) ? $_POST['industry'] : "";
    $desc = isset($_POST['description']) ? $_POST['description'] : "";
    $logo = isset($_FILES['logo_url']) ? $logo_url : "";
    $backdrop = isset($_FILES['backdrop_url']) ? $backdrop_url : "";

    $wpdb->query(
        $wpdb->prepare("
        UPDATE `wp_organization` SET         
            name = %s,
            shortname = %s,
            industry = %s,
            description = %s,
            logo_url = %s,
            backdrop_url = %s
            where id = %s 
        ",
            $name, $short, $ind, $desc, $logo, $backdrop, $org_id
        )
    );

$orgs = $wpdb->get_results($wpdb->prepare("SELECT * FROM `wp_organization` WHERE id = $org_id"));

$user_org = null;
foreach($orgs as $org) {
    $user_org = $org;
}

?>
<!-- organization info form -->
<div class="tutor-px-20">
<form class="py-4 col-md-6 mx-auto" method="post" action="" enctype="multipart/form-data">
<div class="d-flex tutor-justify-center tutor-fs-3 tutor-fw-bold tutor-mb-20">
Organization Information
</div>

<div class="tutor-form-group">
<label class="tutor-form-label">Name</label>
<input type="text" required name="org_name" value="<?php echo $user_org-> name; ?>" class="form-control mb-3" />
</div>

<div class="tutor-form-group">
<label class="tutor-form-label">Industry</label>
<input type="text" name="industry" value="<?php echo $user_org-> industry; ?>" class="form-control mb-3" />
</div>

<div class="tutor-form-group">
<label class="tutor-form-label">Short name (4 characters)</label>
<input type="text" name="shortname" required maxlength="4" value="<?php echo $user_org-> shortname; ?>" class="form-control mb-3" />
</div>

<div class="tutor-form-group">
<label class="tutor-form-label">Description</label>
<textarea class="form-control mb-3" name="description" rows="5" cols="50"><?php echo trim(stripslashes($user_org-> description)); ?></textarea>
</div>

<div class="d-flex tutor-justify-around">
<div class="tutor-form-group">
<label class="tutor-form-label">Logo (Size: 200x200px Limit: 200kb)</label>
<div class="input-group mb-3">
    <input type="file" accept=".png,.jpg,.jpeg" name="logo_url" id="logo_url" multiple="false">
    <input type="hidden" name="post_id" id="post_id" value="<?php echo get_the_ID()?>"/>
    <?php wp_nonce_field( 'logo_url', 'logo_url_nonce' ); ?>
</div>
</div>

<div class="tutor-form-group">
<label class="tutor-form-label">Backdrop (Size: 1140x275px Limit: 600kb)</label>
<div class="input-group mb-3">
    <input type="file" accept=".png,.jpg,.jpeg" name="backdrop_url" id="backdrop_url" multiple="false">
    <input type="hidden" name="post_id" id="post_id" value="<?php echo get_the_ID()?>"/>
    <?php wp_nonce_field( 'backdrop_url', 'backdrop_url_nonce' ); ?>
</div>
</div>
</div>

<div class="tutor-mt-32 d-flex tutor-justify-center">
    <input type="submit" name="update" value='Update' class='btn btn-primary'>
</div>
</form>
</div>

这些图像在名为 Dashboard 的主页中使用，这里是代码片段：

<div class="tutor-wrap tutor-wrap-parent tutor-dashboard tutor-frontend-dashboard tutor-dashboard-student tutor-mt-80 tutor-pb-40">
        <div class="tutor-container" >
       <?php if($org_id) { ?>
        <div class="tutor-row tutor-d-flex tutor-justify-between tutor-mb-20" 
        style="background-image: url('<?php echo $user_org->backdrop_url; ?>'); background-size: auto; height:275px; border-radius: 20px;">
        <div class="tutor-d-flex tutor-justify-center tutor-mb-60 ">
        <div class="tutor-avatar tutor-avatar-xl" style="width:150px; height:150px; position: absolute; top:155px">
        <img src="<?php echo $user_org->logo_url; ?>">
        </div>

Answer 1

我会在包含图像（和背景）的 div 中添加一个“id”。 然后使用 ajax 再次推送代码片段。

建立一个小例子，并不完美，但应该给你一个想法。 您可以将数据传递到另一个 php 页面，执行操作并以 JSON 格式返回数据以进行处理。

注意：确保您安全地做事（也就是使用会话来传递关键数据，否则有人可能会传递其他数据并从其他用户那里获取信息）。

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  </head>
  <body>
    <div id="logo"><img src="loading.jpg" /></div>
    <script>
      function UpdateLogo() {
        $.ajax({
          url: "ajax.php",
          type: "POST",
          dataType: "json",
          data: {
            action: "updateLogo",
          },
          success: function (response) {
            console.log(response);
            if (response["STATUS"] == "OK") {
              $("#logo").html('<img src="' + response["logo"] + '">');
            }
          },
          error: function (jqXHR, textStatus, errorThrown) {
            $("#logo").html("Error;" + errorThrown);
          },
        });
      }
      UpdateLogo();
    </script>
  </body>
</html>

ajax.php

<?php

if ($action = "UpdateLogo") {
    //do stuff using sessions variable or whatever secure.
    $return['STATUS'] = 'OK';
    $return['logo'] = 'bla.jpg';
    echo json_encode($return);
}