徐祖忍 發表於 2023-6-5 00:00:00

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

<p>
<strong>图片上传</strong></p>
<p>
文件准备：新建php文件，我用默认主题Twenty Ten来测试，首先在这个主题的文件夹下新建一个文件-myfunctions.php   然后打开functions.php文件在最底部添加下面的代码载入我们新建的这个文件：</p>
<div>
<div>
<div id="highlighter_574064">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
</td>
<td>
<div>
<div>
<code>include_once</code><code>(</code><code>'myfunctions.php'</code><code>); </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
类的代码如下：</p>
<div>
<div>
<div id="highlighter_313823">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
<div>
31</div>
<div>
32</div>
<div>
33</div>
<div>
34</div>
<div>
35</div>
<div>
36</div>
<div>
37</div>
<div>
38</div>
<div>
39</div>
<div>
40</div>
<div>
41</div>
<div>
42</div>
<div>
43</div>
<div>
44</div>
<div>
45</div>
<div>
46</div>
<div>
47</div>
<div>
48</div>
<div>
49</div>
<div>
50</div>
<div>
51</div>
<div>
52</div>
<div>
53</div>
<div>
54</div>
<div>
55</div>
<div>
56</div>
<div>
57</div>
<div>
58</div>
<div>
59</div>
<div>
60</div>
<div>
61</div>
<div>
62</div>
<div>
63</div>
<div>
64</div>
<div>
65</div>
<div>
66</div>
<div>
67</div>
<div>
68</div>
<div>
69</div>
<div>
70</div>
<div>
71</div>
<div>
72</div>
</td>
<td>
<div>
<div>
<code>&lt;?php   </code>
</div>
<div>
<code>//类ClassicOptions  </code>
</div>
<div>
<code>class</code> <code>ClassicOptions {   </code>
</div>
<div>
<code>  </code><code>/* -- getOptions函数获取选项组 -- */</code>  </div>
<div>
<code>  </code><code>function</code> <code>getOptions() {  </code>
</div>
<div>
<code>    </code><code>// 在数据库中获取选项组   </code>
</div>
<div>
<code>    </code><code>$options</code> <code>= get_option(</code><code>'classic_options'</code><code>);   </code>
</div>
<div>
<code>    </code><code>// 如果数据库中不存在该选项组, 设定这些选项的默认值, 并将它们插入数据库   </code>
</div>
<div>
<code>    </code><code>if</code> <code>(!</code><code>is_array</code><code>(</code><code>$options</code><code>)) {   </code>
</div>
<div>
<code>      </code><code>//初始默认数据  </code>
</div>
<div>
<code>      </code><code>$options</code><code>[</code><code>'ashu_copy_right'</code><code>] = </code><code>'阿树工作室'</code><code>;  </code>
</div>
<div>
<code>        </code>
</div>
<div>
<code>      </code><code>//这里可添加更多设置选项  </code>
</div>
<div>
<code>        </code>
</div>
<div>
<code>      </code><code>update_option(</code><code>'classic_options'</code><code>, </code><code>$options</code><code>);   </code>
</div>
<div>
<code>    </code><code>}  </code>
</div>
<div>
<code>    </code><code>// 返回选项组  </code>
</div>
<div>
<code>    </code><code>return</code> <code>$options</code><code>;  </code>
</div>
<div>
<code>  </code><code>}  </code>
</div>
<div>
<code>  </code><code>/* -- init函数 初始化 -- */</code>  </div>
<div>
<code>  </code><code>function</code> <code>init() {   </code>
</div>
<div>
<code>    </code><code>// 如果是 POST 提交数据, 对数据进行限制, 并更新到数据库   </code>
</div>
<div>
<code>    </code><code>if</code><code>(isset(</code><code>$_POST</code><code>[</code><code>'classic_save'</code><code>])) {   </code>
</div>
<div>
<code>      </code><code>// 获取选项组, 因为有可能只修改部分选项, 所以先整个拿下来再进行更改   </code>
</div>
<div>
<code>      </code><code>$options</code> <code>= ClassicOptions::getOptions();   </code>
</div>
<div>
<code>      </code><code>// 数据处理  </code>
</div>
<div>
<code>      </code><code>$options</code><code>[</code><code>'ashu_copy_right'</code><code>] = </code><code>stripslashes</code><code>(</code><code>$_POST</code><code>[</code><code>'ashu_copy_right'</code><code>]);   </code>
</div>
<div>
<code>        </code>
</div>
<div>
<code>      </code><code>//在这追加其他选项的限制处理   </code>
</div>
<div>
<code>        </code>
</div>
<div>
<code>      </code><code>// 更新数据   </code>
</div>
<div>
<code>      </code><code>update_option(</code><code>'classic_options'</code><code>, </code><code>$options</code><code>);   </code>
</div>
<div>
<code>      </code>
</div>
<div>
<code>    </code><code>} </code><code>else</code> <code>{  </code>
</div>
<div>
<code>      </code><code>// 否则, 重新获取选项组, 也就是对数据进行初始化  </code>
</div>
<div>
<code>      </code><code>ClassicOptions::getOptions();   </code>
</div>
<div>
<code>    </code><code>}  </code>
</div>
<div>
<code>      </code>
</div>
<div>
<code>    </code><code>//添加设置页面  </code>
</div>
<div>
<code>    </code><code>add_theme_page(</code><code>"主题设置"</code><code>, </code><code>"主题设置"</code><code>, </code><code>'edit_themes'</code><code>, </code><code>basename</code><code>(</code><code>__FILE__</code><code>), </code><code>array</code><code>(</code><code>'ClassicOptions'</code><code>, </code><code>'display'</code><code>));   </code>
</div>
<div>
<code>  </code><code>}   </code>
</div>
<div>
<code>  </code><code>/* -- 标签页 -- */</code>  </div>
<div>
<code>  </code><code>function</code> <code>display() {   </code>
</div>
<div>
<code>    </code><code>$options</code> <code>= ClassicOptions::getOptions(); ?&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;form method=</code><code>"post"</code> <code>enctype=</code><code>"multipart/form-data"</code> <code>name=</code><code>"classic_form"</code> <code>id=</code><code>"classic_form"</code><code>&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;div </code><code>class</code><code>=</code><code>"wrap"</code><code>&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;h2&gt;&lt;?php _e(</code><code>'阿树工作室主题设置'</code><code>, </code><code>'classic'</code><code>); ?&gt;&lt;/h2&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;!-- 设置内容 --&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;table </code><code>class</code><code>=</code><code>"form-table"</code><code>&gt;   </code>
</div>
<div>
<code>      </code><code>&lt;tbody&gt;   </code>
</div>
<div>
<code>        </code><code>&lt;tr valign=</code><code>"top"</code><code>&gt;   </code>
</div>
<div>
<code>          </code><code>&lt;td&gt;  </code>
</div>
<div>
<code>            </code><code>&lt;label&gt;   </code>
</div>
<div>
<code>              </code><code>&lt;input type=</code><code>"text"</code> <code>name=</code><code>"ashu_copy_right"</code> <code>value=</code><code>"&lt;?php echo($options['ashu_copy_right']); ?&gt;"</code> <code>size=</code><code>"20"</code><code>/&gt;&lt;?php _e(</code><code>'阿树工作室版权文字'</code><code>);?&gt;   </code>
</div>
<div>
<code>            </code><code>&lt;/label&gt;   </code>
</div>
<div>
<code>          </code><code>&lt;/td&gt;   </code>
</div>
<div>
<code>        </code><code>&lt;/tr&gt;   </code>
</div>
<div>
<code>      </code><code>&lt;/tbody&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;/table&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;!-- TODO: 在这里追加其他选项内容 --&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;p </code><code>class</code><code>=</code><code>"submit"</code><code>&gt;   </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"submit"</code> <code>name=</code><code>"classic_save"</code> <code>value=</code><code>"&lt;?php _e('保存设置'); ?&gt;"</code> <code>/&gt;   </code>
</div>
<div>
<code>    </code><code>&lt;/p&gt;   </code>
</div>
<div>
<code>  </code><code>&lt;/div&gt;   </code>
</div>
<div>
<code>&lt;/form&gt;   </code>
</div>
<div>
<code>&lt;?php   </code>
</div>
<div>
<code>  </code><code>}   </code>
</div>
<div>
<code>}  </code>
</div>
<div>
<code>  </code>
</div>
<div>
<code>/*初始化，执行ClassicOptions类的init函数*/</code>  </div>
<div>
<code>add_action(</code><code>'admin_menu'</code><code>, </code><code>array</code><code>(</code><code>'ClassicOptions'</code><code>, </code><code>'init'</code><code>));    </code>
</div>
<div>
<code>?&gt;  </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
之后查看我们的后台设置页面，看一下我添加之后的效果图：</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress后台中实现图片上传功能的实例讲解" alt="WordPress后台中实现图片上传功能的实例讲解" src="https://zhuji.jb51.net/uploads/img/202305/ab0af2e1667a1b122935e9dd60cb657c.jpg"></p>
<p>
此时文本域和上传按钮已经有了，但是点击还是没有任何效果。为了点击后弹出那个上传框架，我们还需要添加js代码。</p>
<p>
为了便于管理，我们新建一个js文件，在twentyten主题文件夹下新建一个文件夹js然后，在这个文件加下新建一个upload.js文件。添加js代码：</p>
<div>
<div>
<div>
<div id="highlighter_668506">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
</td>
<td>
<div>
<div>
<code>jQuery(document).ready(</code><code>function</code><code>() {  </code>
</div>
<div>
<code>  </code><code>//upbottom为上传按钮的id  </code>
</div>
<div>
<code>  </code><code>jQuery(</code><code>'#upbottom'</code><code>).click(</code><code>function</code><code>() {  </code>
</div>
<div>
<code>    </code><code>//ashu_logo为文本域  </code>
</div>
<div>
<code>     </code><code>targetfield = jQuery(</code><code>this</code><code>).prev(</code><code>'#ashu_logo'</code><code>);  </code>
</div>
<div>
<code>     </code><code>tb_show(</code><code>''</code><code>, </code><code>'media-upload.php?type=image&amp;amp;TB_iframe=true'</code><code>);  </code>
</div>
<div>
<code>     </code><code>return</code> <code>false</code><code>;  </code>
</div>
<div>
<code>  </code><code>});  </code>
</div>
<div>
<code>  </code>
</div>
<div>
<code>  </code><code>window.send_to_editor = </code><code>function</code><code>(html) {  </code>
</div>
<div>
<code>     </code><code>imgurl = jQuery(</code><code>'img'</code><code>,html).attr(</code><code>'src'</code><code>);  </code>
</div>
<div>
<code>     </code><code>jQuery(targetfield).val(imgurl);  </code>
</div>
<div>
<code>     </code><code>tb_remove();  </code>
</div>
<div>
<code>  </code><code>}  </code>
</div>
<div>
<code>  </code>
</div>
<div>
<code>});</code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
下面就是加载js和css了。<br>
在上面的类中display()函数中添加以下代码：</p>
<div>
<div>
<div id="highlighter_957641">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
</td>
<td>
<div>
<div>
<code>//加载upload.js文件  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_script(</code><code>'my-upload'</code><code>, get_bloginfo( </code><code>'stylesheet_directory'</code> <code>) . </code><code>'/js/upload.js'</code><code>);  </code>
</div>
<div>
<code>    </code><code>//加载上传图片的js(wp自带)  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_script(</code><code>'thickbox'</code><code>);  </code>
</div>
<div>
<code>    </code><code>//加载css(wp自带)  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_style(</code><code>'thickbox'</code><code>); </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
之后如果你查看后台设置页面的源码，在源码的大概最后面位置能看到你加载的这个js文件。</p>
<p>
好了，可以去试用了：</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress后台中实现图片上传功能的实例讲解" alt="WordPress后台中实现图片上传功能的实例讲解" src="https://zhuji.jb51.net/uploads/img/202305/73e822f82663c8b86bc6e8849f173ebe.jpg"></p>
<p>
 </p>
<p>
<strong>多个图片上传表单</strong><br>
首先我们修改表单，添加多个上传按钮，还加上显示图片用的div容器。<br>
上面教程中的js代码中是通过文本域的id值来获取元素的，如果有多个文件上传表单，但是在一个html文档中id不能相同，那样的话，就得针对每个表单都写一个js，这样很繁琐，所以今天我们修改一下表单，并且将js改成通过class获取对象。</p>
<p>
将类中的display()函数修改为(我新加了一个ashu_ico项，并且将上传按钮的id属性去掉改成)：</p>
<div>
<div>
<div id="highlighter_458289">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
<div>
17</div>
<div>
18</div>
<div>
19</div>
<div>
20</div>
<div>
21</div>
<div>
22</div>
<div>
23</div>
<div>
24</div>
<div>
25</div>
<div>
26</div>
<div>
27</div>
<div>
28</div>
<div>
29</div>
<div>
30</div>
</td>
<td>
<div>
<div>
<code>function</code> <code>display() {  </code>
</div>
<div>
<code>    </code><code>//加载upload.js文件  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_script(</code><code>'my-upload'</code><code>, get_bloginfo( </code><code>'stylesheet_directory'</code> <code>) . </code><code>'/js/upload.js'</code><code>);  </code>
</div>
<div>
<code>    </code><code>//加载上传图片的js(wp自带)  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_script(</code><code>'thickbox'</code><code>);  </code>
</div>
<div>
<code>    </code><code>//加载css(wp自带)  </code>
</div>
<div>
<code>    </code><code>wp_enqueue_style(</code><code>'thickbox'</code><code>);  </code>
</div>
<div>
<code>    </code><code>$options</code> <code>= ClassicOptions::getOptions(); ?&gt;     </code>
</div>
<div>
<code>    </code><code>&lt;form method=</code><code>"post"</code> <code>enctype=</code><code>"multipart/form-data"</code> <code>name=</code><code>"classic_form"</code> <code>id=</code><code>"classic_form"</code><code>&gt;     </code>
</div>
<div>
<code>    </code><code>&lt;div </code><code>class</code><code>=</code><code>"wrap"</code><code>&gt;     </code>
</div>
<div>
<code>    </code><code>&lt;h2&gt;&lt;?php _e(</code><code>'阿树工作室主题设置'</code><code>); ?&gt;&lt;/h2&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;p&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;label&gt;  </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"text"</code> <code>size=</code><code>"80"</code> <code>name=</code><code>"ashu_logo"</code> <code>id=</code><code>"ashu_logo"</code> <code>value=</code><code>"&lt;?php echo($options['ashu_logo']); ?&gt;"</code><code>/&gt;  </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"上传"</code> <code>class</code><code>=</code><code>"ashu_bottom"</code><code>/&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;/label&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;/p&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;p&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;label&gt;  </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"text"</code> <code>size=</code><code>"80"</code> <code>name=</code><code>"ashu_ico"</code> <code>id=</code><code>"ashu_ico"</code> <code>value=</code><code>"&lt;?php echo($options['ashu_ico']); ?&gt;"</code><code>/&gt;  </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"button"</code> <code>value=</code><code>"上传"</code> <code>class</code><code>=</code><code>"ashu_bottom"</code><code>/&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;/label&gt;  </code>
</div>
<div>
<code>    </code><code>&lt;/p&gt;      </code>
</div>
<div>
<code>    </code><code>&lt;p </code><code>class</code><code>=</code><code>"submit"</code><code>&gt;  </code>
</div>
<div>
<code>      </code><code>&lt;input type=</code><code>"submit"</code> <code>name=</code><code>"classic_save"</code> <code>value=</code><code>"&lt;?php _e('保存设置'); ?&gt;"</code> <code>/&gt;     </code>
</div>
<div>
<code>    </code><code>&lt;/p&gt;     </code>
</div>
<div>
<code>  </code><code>&lt;/div&gt;     </code>
</div>
<div>
<code>&lt;/form&gt;     </code>
</div>
<div>
<code>&lt;?php     </code>
</div>
<div>
<code>  </code><code>} </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
这里新加了一个设置项，前面默认数据设置、数据更新都需要相应的增加项目，很简单，这里不赘述。</p>
<p>
且看新的js代码，用编辑器打开我们的upload.js，修改代码为：</p>
<div>
<div>
<div id="highlighter_564373">
<div>
<span>?</span>
</div>
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr>
<td>
<div>
1</div>
<div>
2</div>
<div>
3</div>
<div>
4</div>
<div>
5</div>
<div>
6</div>
<div>
7</div>
<div>
8</div>
<div>
9</div>
<div>
10</div>
<div>
11</div>
<div>
12</div>
<div>
13</div>
<div>
14</div>
<div>
15</div>
<div>
16</div>
</td>
<td>
<div>
<div>
<code>jQuery(document).ready(</code><code>function</code><code>() {  </code>
</div>
<div>
<code>  </code><code>//查找class为ashu_bottom的对象  </code>
</div>
<div>
<code>  </code><code>jQuery(</code><code>'input.ashu_bottom'</code><code>).click(</code><code>function</code><code>() {  </code>
</div>
<div>
<code>    </code><code>//获取它前面的一个兄弟元素  </code>
</div>
<div>
<code>     </code><code>targetfield = jQuery(</code><code>this</code><code>).prev(</code><code>'input'</code><code>);  </code>
</div>
<div>
<code>     </code><code>tb_show(</code><code>''</code><code>, </code><code>'media-upload.php?type=image&amp;amp;TB_iframe=true'</code><code>);  </code>
</div>
<div>
<code>     </code><code>return</code> <code>false</code><code>;  </code>
</div>
<div>
<code>  </code><code>});  </code>
</div>
<div>
<code>  </code>
</div>
<div>
<code>  </code><code>window.send_to_editor = </code><code>function</code><code>(html) {  </code>
</div>
<div>
<code>     </code><code>imgurl = jQuery(</code><code>'img'</code><code>,html).attr(</code><code>'src'</code><code>);  </code>
</div>
<div>
<code>     </code><code>jQuery(targetfield).val(imgurl);  </code>
</div>
<div>
<code>     </code><code>tb_remove();  </code>
</div>
<div>
<code>  </code><code>}  </code>
</div>
<div>
<code>  </code>
</div>
<div>
<code>});  </code>
</div>
</div>
</td>
</tr></tbody></table>
</div>
</div>
<div id="codetool">
<div>
<textarea></textarea>
</div>
</div>
</div>
<p>
到此多个图片上传已经实现，其实也很简单。。</p>
<p>
<img style="max-width:100%!important;height:auto!important;"title="WordPress后台中实现图片上传功能的实例讲解" alt="WordPress后台中实现图片上传功能的实例讲解" src="https://zhuji.jb51.net/uploads/img/202305/d350e3f22b58c2bd7bb3cf33cd68ceeb.jpg"></p>
頁: [1]
查看完整版本: WordPress后台中实现图片上传功能的实例讲解