WordPress 如何在前端自定义上传图片文件到媒体库

WordPress 如何在前端自定义上传图片文件到媒体库

在 WordPress 中,媒体库是我们管理各种文件的地方。在撰写文章时,如果我们想要向页面中添加图片,可以使用 WordPress 默认提供的上传图片功能。但是这个功能只能在 WordPress 后台使用,当我们希望用户可以在前台上传图片到媒体库时,我们该怎么办呢?下面我们就来介绍一下如何实现在 WordPress 前端自定义上传图片文件到媒体库。

1. 创建前端上传文件表单

首先,我们需要在前端创建一个上传文件的表单,这里我们使用 HTML 的 form 元素来完成。并添加一个 input 元素,设置其 type 属性为 file,用于上传文件。

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="submit">上传图片</button>
</form>

其中 enctype 属性是指定表单数据的编码方式,这里使用 multipart/form-data。

2. 处理文件上传请求

当用户选择了要上传的文件后,我们需要在服务器端对其进行处理。在此之前,我们需要使用 Ajax 将上传的文件发送到后台,并使用 WordPress 提供的函数 wp_handle_upload() 进行文件的处理和上传。

jQuery('form').on('submit', function(e) {
    e.preventDefault();
    var data = new FormData();
    data.append('action', 'upload_file');
    data.append('file', jQuery('[name="file"]')[0].files[0]);
    jQuery.ajax({
        url: ajaxurl,
        type: 'POST',
        data: data,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
        }
    });
});

add_action('wp_ajax_upload_file', 'upload_file');
add_action('wp_ajax_nopriv_upload_file', 'upload_file');
function upload_file() {
    $file = $_FILES['file'];
    require_once(ABSPATH . 'wp-admin/includes/media.php');
    require_once(ABSPATH . 'wp-admin/includes/file.php');
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    $attachment_id = media_handle_upload('file', 0);
    if (is_wp_error($attachment_id)) {
        wp_send_json_error($attachment_id);
    } else {
        $attachment_url = wp_get_attachment_url($attachment_id);
        wp_send_json_success($attachment_url);
    }
}

这里需要注意的是,在处理 Ajax 请求时,我们必须注册一个 WordPress Ajax 处理函数,并使用 wp_ajax_ 和 wp_ajax_nopriv_ 前缀来区分已登录用户和未登录用户。

3. 显示上传成功的文件信息

最后,当用户上传成功后,我们需要在页面上显示上传的文件信息。在此之前,我们需要添加一个具有数据属性 data-action 的 div 元素,用于保存上传文件的 URL。

<div class="upload-photo" data-action="">
    <img src=""  />
</div>

当上传成功后,我们可以使用 Ajax 的 success 回调函数中返回的 URL,来设置该 div 元素的 data-action 属性和 img 元素的 src 属性,从而显示出上传成功的文件信息。

success: function(response) {
    jQuery('.upload-photo').attr('data-action', response.data);
    jQuery('.upload-photo img').attr('src', response.data);
}

4. 完整代码

将上述代码整合后,我们得到的完整代码如下:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button type="submit">上传图片</button>
</form>

<div class="upload-photo" data-action="">
    <img src=""  />
</div>

<script>
    jQuery('form').on('submit', function(e) {
        e.preventDefault();
        var data = new FormData();
        data.append('action', 'upload_file');
        data.append('file', jQuery('[name="file"]')[0].files[0]);
        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: data,
            processData: false,
            contentType: false,
            success: function(response) {
                jQuery('.upload-photo').attr('data-action', response.data);
                jQuery('.upload-photo img').attr('src', response.data);
            }
        });
    });

    add_action('wp_ajax_upload_file', 'upload_file');
    add_action('wp_ajax_nopriv_upload_file', 'upload_file');
    function upload_file() {
        $file = $_FILES['file'];
        require_once(ABSPATH . 'wp-admin/includes/media.php');
        require_once(ABSPATH . 'wp-admin/includes/file.php');
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attachment_id = media_handle_upload('file', 0);
        if (is_wp_error($attachment_id)) {
            wp_send_json_error($attachment_id);
        } else {
            $attachment_url = wp_get_attachment_url($attachment_id);
            wp_send_json_success($attachment_url);
        }
    }
</script>

这样,在前端就可以完成上传图片到 WordPress 媒体库的功能,并将上传成功的文件信息展示出来。

晓白博客网版权所有,原文地址https://www.xbnb.cn/5261
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容