WordPress 创建上传文件插件

首先呢，在我们创建上传文件的插件时。我们可以去看一下 WordPress 自带的 媒体库。 (PS: 也许有的人会觉得WordPress 既然都有了媒体库干嘛还要大费周章的去自己写一个上传媒体文件的插件呢？吃饱了闲没事干？也确实，有现成的不用确实没事找事，但如果你这样做了，你会对WordPress的结构更加了解，更加清晰) 其中 有几个文件我们必须要去了解一下。 第一个就是 wp-admin/media-new.php 第二个就是 wp-admin/async-upload.php 这两个文件中 media-new.php 是WordPress媒体库新增的页面（见图1-0） 而另一个文件 async-upload.php 则是 WordPress 处理文件上传的一个文件。

图 1-0

步骤1

我们可以在图1-0的页面试着拖拽几个文件上去，拖拽上去后WordPress 他会自动异步请求 async-upload.php 文件。

啥？你说你不信🙄

…沉默了片刻

Emmm，不信你可以按F12打开控制器看网络请求那块的最下方是否存在 async-upload.php 这个请求咯 🤪

…沉默了会儿

（害，算了，眼见为实,耳听为虚，本大爷就大发慈悲的让你看一下未发送与发送时的截图吧🧐）

未做任何操作 上传图片 上传图片成功

好，现在咱看到了三张图，分别是没有做任何操作时的截图，上传文件时的截图以及上传文件成功后的截图。 在这里咱也能很明性(显)的发现 网络请求这一块发生了变化，请求了两次async-upload.php。 这样一看，是不是与我之前所说的 async-upload.php 是处理上传的文件的描述相符合呢？

既然符合那咱就不多讲直接跳过进入下一阶段如何？ 啊？你说好？行吧，那我就进入下一阶段吧！

步骤1-续解

n年过后，曾看过此篇文章的x同学再回首观看此篇文章时，意外的发现了一个细节。 x同学：“TNN的！有一个细节这作者没讲！” 。 恭喜你，盲僧，发现了华点！

细心的小伙伴可能注意到了。

文件上传成功后的截图与文件上传的截图对比，前者比后者多请求了一次 async-upload.php 。

明明我只上传了一次，为啥会请求两次呢？

这里我们来看一下第一次和第二次的传参吧！

从这两个图中我们可以很明显的得知一个信息 - 第一次传参的值与第二次不一样。

那么第一次与第二次传的参数又代表什么呢？这里就稍微解释一下吧。

首先是第一次的传参。

参数名参数解释name文件名post_id文章ID_wpnonceWordPress 验证参数async-upload上传的文件type，tab在此上传文件的方法里作用不明

因为媒体库的数据是与文章数据存在同一个数据表里的，即 数据库表前缀名_posts 里，所以存在post_id 这个值(但并不是真正的post_id)

而执行完第一次后，实际上就已经完成了上传文件这个功能。

但WordPress 为什么还会再请求一次 async-upload 这个文件呢？

实际上第二次请求只是把上传成功后的图片显示出来。

自己仔细看的话会注意到第二个 请求下面存在一个图片。

这个图片打开一看你会发现，欸这不是我刚刚上传的图片吗？

这时候注意看发送文件和发送文件成功后的截图，你们也会发现相比前者，后者下面那个展示了上传的图片，前者那个并没有展示。

所以不需要我多说了吧？

好，咱再看看第二次传过去的值 ： attachment_id 与 fetch 。

attachment_id 是你第一次执行成功后 async-upload.php 返回过来的id。 fetch 的话不多解释，可以去 async-upload.php 里 搜索一下关键词。

步骤2

创建一个插件文件夹。

将其命名为 FileUploadTestPlugin后，创建 index 与 index-part 两个php文件

<?php /** *@package File_Upload_Test_Plugin *@version 1.0 */ /** Plugin Name: File Upload Test Plugin Plugin URI: http://127.0.0.1 Description: Upload More File Author: Rarin Version: 1.0 Author URI: http://127.0.0.1 */ add_action('admin_menu','file_upload_test_plugin_menu_add'); function file_upload_test_plugin_menu_add() { add_menu_page( 'File Upload Test', 'File Upload Test', 'moderate_comments', 'file_upload_test', 'file_upload_test_callback' ); } function file_upload_test_callback() { get_template_part("../../plugins/FileUploadTestPlugin/index",'part'); } ?>

index-part.php

<?php $url = "async-upload.php的地址"; wp_nonce_field('media-form'); // 这个方法是为了获取 _wpnonce 的值 ?> // 接下来可以填写你的模板了 <form action="" enctype="multipart/form-data"> <input type="file" name="file" multiple> <input type="submit" value="提交"> </form> <script> let form = document.querySelector("form"), files = document.querySelector("input[name='file']"), fileList = []; form.onsubmit = function(e) { e.preventDefault(); fileList.foreach(function(file,index){ sendFile(file); }) } files.onchange = function() { for ( let i = 0; i < files.files.length; i++ ) { fileList.push(files.files[i]); } } function sendFile(file) { let xhr = new XMLHttpRequest(), formData = new FormData(); // 看第一次请求过去的值来存放值 // formData.append() xhr.open("POST","<?php echo $url?>") xhr.send(formData); } </script>

到这就结束啦！

…沉默了许久。

x同学：“这就结束了？就这就这？”。

嗯对，就是这么简单！🤭