在插件选项页面中上传文件

时间：2012-05-31 作者：Badr Hari

我想在我的自定义插件选项页面上载图像。

<form action="?page=slideshow_options" method="post">
    <input type="file" name="async-upload" id="async-upload">
    <input type="submit" name="html-upload" id="html-upload" class="button" value="Upload">
</form>

如果我尝试检查是否用isset单击了提交按钮，我会收到一些奇怪的错误。例如，如何让它调用函数uploadimages（）？

2 个回复

最合适的回答,由SO网友:brasofilo 整理而成

哇！这不是一个简单的。。。这不是调用魔法函数的问题uploadimages()... 我希望它会：）

我从一个我似乎找不到的教程中学到了东西（但是this one 看起来很公平）和分析其他插件。

以下只是一个总体介绍，很抱歉没有制作详细的手册。可能会有缺陷，但希望你能加入其中，找到施展魔法的方法。

您需要将以下脚本和样式排队in your plugin\'s page:

function my_admin_scripts() {
    wp_enqueue_script(\'media-upload\');
    wp_enqueue_script(\'thickbox\');
    wp_register_script(\'your-plugin-js\', THIS_PLUG_DIR . \'js/uploader.js\', array(\'jquery\', \'media-upload\', \'thickbox\'));
    wp_enqueue_script(\'your-plugin-js\');
}

function my_admin_styles() {
    wp_enqueue_style(\'thickbox\');
}

上载按钮和图像容器。

<?php
$img = (isset($link->link_image) && \'\' !== $link->link_image) ? \'<img src="\' . $link->link_image . \'" >\' : \'\';
$spanimg = sprintf(\'<div id="my-link-img">%s</div>\', $img);
?>
<a id="upload_image_button" href="#"><?php _e(\'Set image\', \'your-textdomain\'); ?></a>
<?php echo $spanimg; ?>

最后，文件中的jQueryuploader.js 诀窍发生的地方：

jQuery(document).ready(function($) {    
    $(\'#upload_image_button\').click(function() {
        formfield = $(\'#link_image\').attr(\'name\'); 
        tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
        return false;
    });

    window.send_to_editor = function(html) {
        imgurl = $(\'img\',html).attr(\'src\');
        imgsrc = \'<img src="\'+imgurl+\'">\';
        $(\'#link_image\').val(imgurl); // this populates a text field with the image url
        $(\'#my-link-img\').html(imgsrc); // this prints the image into a div
        tb_remove();
    }
});

这些片段取自plugin of mine （这需要更新，因为我在发布后学到了很多东西）。

祝你好运

SO网友:drinkmaker

File Upload using WordPress Settings API

这个register_setting 函数将表单提交时的值属性直接保存到数据库中。我们还可以根据自己的选择更改或验证值。这个register_setting 函数接受第三个参数，这是一个回调，在将设置保存到数据库之前会触发该回调。

对于通过设置页面上载文件，我们可以通过回调处理上载，然后将URL存储到数据库中的文件。下面是显示如何执行此操作的示例代码：

<?php

function demo_settings_page()
{
    add_settings_section("section", "Section", null, "demo");
    add_settings_field("demo-file", "Demo File", "demo_file_display", "demo", "section");  
    register_setting("section", "demo-file", "handle_file_upload");
}

function handle_file_upload($option)
{
    if(!empty($_FILES["demo-file"]["tmp_name"]))
    {
        $urls = wp_handle_upload($_FILES["demo-file"], array(\'test_form\' => FALSE));
        $temp = $urls["url"];
        return $temp;   
    }

    return $option;
}

function demo_file_display()
{
   ?>
        <input type="file" name="demo-file" /> 
        <?php echo get_option(\'demo-file\'); ?>
   <?php
}

add_action("admin_init", "demo_settings_page");

function demo_page()
{
  ?>
      <div class="wrap">
         <h1>Demo</h1>

         <form method="post" action="options.php">
            <?php
               settings_fields("section");

               do_settings_sections("demo");

               submit_button(); 
            ?>
         </form>
      </div>
   <?php
}

function menu_item()
{
  add_submenu_page("options-general.php", "Demo", "Demo", "manage_options", "demo", "demo_page"); 
}

add_action("admin_menu", "menu_item");

以下是设置页面的屏幕截图：

基于本文的答案http://qnimate.com/file-upload-using-wordpress-settings-api/

结束

小码农CODE

在插件选项页面中上传文件

相关推荐

Plugins_url()错误地返回带有www子域的URL