WordPress后台中实现图片上传功能的实例讲解

//这里可添加更多设置选项 update_option('classic_options',$options); } // 返回选项组 return $options;

}
/ -- init函数 初始化 -- /
function init() {
// 如果是 POST 提交数据,对数据进行限制,并更新到数据库
if(isset($_POST['classic_save'])) {
// 获取选项组,因为有可能只修改部分选项,所以先整个拿下来再进行更改
$options = ClassicOptions::getOptions();
// 数据处理
$options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']);

  //在这追加其他选项的限制处理   

  // 更新数据   
  update_option('classic_options',$options);   

} else {  
  // 否则,重新获取选项组,也就是对数据进行初始化  
  ClassicOptions::getOptions();   
}  

//添加设置页面  
add_theme_page("主题设置","主题设置",'edit_themes',basename(__FILE__),array('ClassicOptions','display'));   

}
/ -- 标签页 -- /
function display() {
$options = ClassicOptions::getOptions(); ?>
<form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form">
<div class="wrap">

/初始化，执行ClassicOptions类的init函数/
add_action('admin_menu','init'));
?>

之后查看我们的后台设置页面，看一下我添加之后的效果图：

此时文本域和上传按钮已经有了，但是点击还是没有任何效果。为了点击后弹出那个上传框架，我们还需要添加js代码。

为了便于管理，我们新建一个js文件，在twentyten主题文件夹下新建一个文件夹js然后，在这个文件加下新建一个upload.js文件。添加js代码：

下面就是加载js和css了。 在上面的类中display()函数中添加以下代码：

之后如果你查看后台设置页面的源码，在源码的大概最后面位置能看到你加载的这个js文件。

好了，可以去试用了：

多个图片上传表单

首先我们修改表单，添加多个上传按钮，还加上显示图片用的div容器。 上面教程中的js代码中是通过文本域的id值来获取元素的，如果有多个文件上传表单，但是在一个html文档中id不能相同，那样的话，就得针对每个表单都写一个js，这样很繁琐，所以今天我们修改一下表单，并且将js改成通过class获取对象。

将类中的display()函数修改为(我新加了一个ashu_ico项，并且将上传按钮的id属性去掉改成class="ashu_bottom")：

这里新加了一个设置项，前面默认数据设置、数据更新都需要相应的增加项目，很简单，这里不赘述。

且看新的js代码，用编辑器打开我们的upload.js，修改代码为：

到此多个图片上传已经实现，其实也很简单。。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!