显示“请等待”消息或进度条，同时文件下载 [英] Show a "Please Wait" Message or a Progress Bar while Files Download

问题描述

我使用以下WordPress管理通知提示用户下载一些文件。我想在文件下载时包含一个进度条或至少一个下载 - 请稍候的消息。

I use the following WordPress admin notice to prompt users to download some files. I would like to include either a progress bar or at least a "Downloading - Please wait" message while files are downloading.

任何想法？

我已经尝试过几个jQuery解决方案，但可以无所事事。在jQuery中我总是noob。

I've tried several jQuery solutions but could get nothing to work. I'm a total noob when it comes to jQuery.

/* Ask user to download GeoIP database files. */
add_action( 'admin_notices', 'lsmi_dl_admin_notice' );
add_action( 'network_admin_notices', 'lsmi_dl_admin_notice' ); // also show message on multisite
function lsmi_dl_admin_notice() {
    $dir = dirname( __FILE__ );
    $localfilev4 = $dir . '/data/GeoIPv4.dat';
    $localfilev6 = $dir . '/data/GeoIPv6.dat';
    $ctx = stream_context_create( array( 'http' => array( 'timeout' => 120 ) ) ); 
    if ( !file_exists( $localfilev4 ) ) {
        if ( current_user_can( 'install_plugins' ) ) {
            echo
            '<div class="notice notice-warning is-dismissible"><p>Notice: This plugin uses Maxmind Geolite databases for better accuracy. Click the download button to install now.
            <form action="" method="get">
            <input type="submit" class="button" name="download" value="download" />
            </div>';
            if($_GET){
                if(isset($_GET['download'])){
                    $newfilev4 = file_get_contents( "https://sourceforge.net/projects/geoipupdate/files/GeoIPv4.dat/download", 0, $ctx );
                    file_put_contents( $dir . '/data/GeoIPv4.dat', $newfilev4 );
                    if ( !file_exists( $localfilev6 ) ) {
                        $newfilev6 = file_get_contents( "https://sourceforge.net/projects/geoipupdate/files/GeoIPv6.dat/download", 0, $ctx );
                        file_put_contents( $dir . '/data/GeoIPv6.dat', $newfilev6 );
                    }
                }
                echo '<meta http-equiv="refresh" content="0">';
            }
        }
    }
}

推荐答案

尝试给你的按钮一个这样的ID：

Try giving your button an ID like so:

<input type="submit" class="button" name="download" value="download" id="download" />

还给你的div这样的id：

Also give your div an id like so:

<div class="notice notice-warning is-dismissible" id="download-div">

然后我们可以使用一个基本的jQuery onClick函数，并改变's innerhtml，如下所示：

Then we can use a basic jQuery onClick function and change the 's innerhtml like so:

    $("#download").click(
         function () {
             $('#download-div').html("Please wait...");
         }            
     );
 });

希望这有助于：）

这篇关于显示“请等待”消息或进度条，同时文件下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！