上传图片到子页面的表单后，我如何在主页上重新加载图片?

Question

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

好的是，如果我更新表单字段并点击更新按钮，它将刷新，然后字段将在此后更新(得到一些主要的帮助)。糟糕的是，除非我再次刷新，否则徽标和背景不会更新。

这是一段屏幕录音

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

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

但是它没有工作。

如果你有线索请告诉我!

下面是子页面my Organization的代码:

<?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。然后使用ajax再次推送代码片段。

建立一个小例子，不完美，但应该给你一个想法。你可以将数据传递到另一个php页面，做一些事情，并以JSON形式返回数据来处理它。

注意:确保你做的事情是安全的(也就是说，使用会话来传递关键数据，否则其他人可以传递其他数据并从其他用户那里获取信息)。

index . 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);
}