如何在提交表单后延迟页面刷新

Question

我有一个将个人资料图片上传到 wordpress 的表单。表单提交后，页面刷新并再次显示旧图片。 我必须等待大约 4 或 5 秒才能显示新图像。 所以我必须刷新页面 2 次才能看到新的图像集。

我想延迟页面的刷新而不是表单的提交，这样我相信你不必刷新页面两次就可以看到变化。

我尝试使用脚本，但它不起作用。 我为这一切道歉，但我是新手，我对 php 或 js 了解不多，有人可以帮助我吗？

<form id="wpua-edit-<?php echo esc_attr( $user->ID ); ?>" class="wpua-edit" action="" method="post" enctype="multipart/form-data">
  
  <input type="hidden" name="wp-user-avatar" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wp-user-avatar' : 'wp-user-avatar-existing' ) ?>" value="<?php echo esc_attr( $wpua ); ?>" />

            <div class="upload-avatar" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload-button' : 'wpua-upload-button-existing' ); ?>">
                <input name="wpua-file" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-file' : 'wpua-file-existing' ); ?>" type="file" class="wp-input-file"/>
                <button type="submit" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload' : 'wpua-upload-existing' ); ?>" name="submit" value="<?php esc_html_e( 'Aggiorna', 'one-user-avatar' ); ?>">
                    <?php esc_html_e( 'Upload', 'one-user-avatar' ); ?>
                </button>
            </div>

            <div id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-images' : 'wpua-images-existing' ); ?>" class="<?php echo esc_attr( $hide_images ); ?>">
            <p id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-remove-button' : 'wpua-remove-button-existing' ); ?>" class="<?php echo esc_attr( $hide_remove ); ?>">
               <button type="button" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-remove' : 'wpua-remove-existing' ); ?>" name="wpua-remove"><?php esc_html_e( 'Remove Image', 'one-user-avatar' ); ?></button>
            </p>
            </div>
            
            <input type="hidden" name="wpua_action" value="update" />
            <input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr( $user->ID ); ?>" />

            <?php wp_nonce_field( 'update-user_' . $user->ID ); ?>
            <?php submit_button( __( 'Update Profile', 'one-user-avatar' ) ); ?>
            
</form>


<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
    
    $("wpua-edit-<?php echo esc_attr( $user->ID ); ?>").submit(function() {
     //your code....
     setTimeout(function() {
         window.location.reload();
      }, 5000);
   });


});
</script>

Answer 1

如果您必须上传图片并希望等到图片上传后再重新加载网站，我会使用 Ajax（ XMLHttpRequest或fetch ）并通过 JavaScript 将图片发送到服务器。 然后你可以等到它被上传并重新加载网站。