Question

如何在wordpress前端集成Dropzonejs文件上传器库，就像内置的一样，并在我的媒体库中提供上传的文件？

Answer 1

Dropzonejs是一个非常广泛的JavaScript库，提供了许多处理媒体上传的选项。

要将dropzonejs与wordpress集成，这个过程非常简单。假设以下代码是您希望显示上传者的地方。

<div id="media-uploader" class="dropzone"></div>
<input type="hidden" name="media-ids" value="">

拥有一个类dropzone会自动将dropzone事件与元素相关联。这将阻止我们覆盖默认参数。所以我们想要禁用库的自动发现功能。

// Disabling autoDiscover, otherwise Dropzone will try to attach twice.
Dropzone.autoDiscover = false;

现在我们将使用jQuery将我们的配置与元素绑定。

jQuery("#media-uploader").dropzone({
    url: dropParam.upload,
    acceptedFiles: 'image/*',
    success: function (file, response) {
        file.previewElement.classList.add("dz-success");
        file['attachment_id'] = response; // push the id for future reference
        var ids = jQuery('#media-ids').val() + ',' + response;
        jQuery('#media-ids').val(ids);
    },
    error: function (file, response) {
        file.previewElement.classList.add("dz-error");
    },
    // update the following section is for removing image from library
    addRemoveLinks: true,
    removedfile: function(file) {
        var attachment_id = file.attachment_id;        
        jQuery.ajax({
            type: 'POST',
            url: dropParam.delete,
            data: {
                media_id : attachment_id
            }
        });
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;        
    }
});

在上面的代码中，我们所做的是使用带有一些参数的元素附加dropzone-

url - 我们要将文件发送到上传的位置。我稍后会初始化变量。
acceptedFiles - 由于我们只对上传图片感兴趣，因此我们会限制仅附加到图片的文件。您可以在此库的网站上找到更多信息。
success - 成功上传文件/图像时触发的回调。它接受两个参数，即上传文件本身的引用和服务器的响应。这非常重要，我们在这里将附件ID存储在表单中。您可以在存储ID之前在此处执行验证。
error - 如果文件上传失败，那么您可以在此处执行任何任务。
addRemoveLinks - 在预览面板下方添加删除文件链接，您可以使用css设置样式。
removedfile - 在预览面板中单击图像的remove file链接时处理操作。在此功能中，我们向服务器发送了ajax调用以从库中删除图像

当然有很多选项可供使用，但我发现这些是设置我的拖放媒体上传器所需的最基本参数。

现在最重要的是决定文件上传器的URL。您可以拥有要处理该操作的自定义文件。但我找到了另一种方式。

~~From this question and the answer我发现使用admin-post.php文件非常了不起。~~

很多人抱怨admin-post.php，所以认为坚持wp_ajax.php是最好的选择。

所以我在dropzone初始化之前初始化了drophandler变量，如下所示 -

wp_enqueue_script('dropzone','path/to/dropzone', array('jquery'));
wp_enqueue_script('my-script','path/to/script',array('jquery','dropzone'));
$drop_param = array(
  'upload'=>admin_url( 'admin-ajax.php?action=handle_dropped_media' ),
  'delete'=>admin_url( 'admin-ajax.php?action=handle_deleted_media' ),
)
wp_localize_script('my-script','dropParam', $drop_param);

现在我们已准备好将图像发送到服务器。在这里，我们将在主题的php文件或我们的插件文件中添加一些function.php代码，但我们需要确保它已加载。

以下功能将负责上传图像并将其另存为库中的附件。

add_action( 'wp_ajax_handle_dropped_media', 'handle_dropped_media' );

// if you want to allow your visitors of your website to upload files, be cautious.
add_action( 'wp_ajax_nopriv_handle_dropped_media', 'handle_dropped_media' );



function handle_dropped_media() {
    status_header(200);

    $upload_dir = wp_upload_dir();
    $upload_path = $upload_dir['path'] . DIRECTORY_SEPARATOR;
    $num_files = count($_FILES['file']['tmp_name']);

    $newupload = 0;

    if ( !empty($_FILES) ) {
        $files = $_FILES;
        foreach($files as $file) {
            $newfile = array (
                    'name' => $file['name'],
                    'type' => $file['type'],
                    'tmp_name' => $file['tmp_name'],
                    'error' => $file['error'],
                    'size' => $file['size']
            );

            $_FILES = array('upload'=>$newfile);
            foreach($_FILES as $file => $array) {
                $newupload = media_handle_upload( $file, 0 );
            }
        }
    }

    echo $newupload;    
    die();
}

以下操作负责删除媒体元素。 wp_delete_attachment()函数的第二个参数允许我们决定是要删除图像还是完全删除它。我想完全删除它，所以通过true。

add_action( 'wp_ajax_handle_deleted_media', 'handle_deleted_media' );

function handle_deleted_media(){

    if( isset($_REQUEST['media_id']) ){
        $post_id = absint( $_REQUEST['media_id'] );

        $status = wp_delete_attachment($post_id, true);

        if( $status )
            echo json_encode(array('status' => 'OK'));
        else
            echo json_encode(array('status' => 'FAILED'));
    }

    die();
}

这将返回响应中的attachment_id，我们将在成功函数中获取它。在media_handle_upload( $file, 0 );我传递了文件的引用和0，因为我还没有想要为媒体分配任何帖子（0表示没有帖子，但如果你想分配那么在此处传递帖子ID。codex中的更多参考。）

这就是在wordpress中上传媒体的全部内容。

~~注意：我还没有完成removing uploaded file部分。我马上就完成了这件事。~~

<强>更新

帖子已更新。现在我们可以从上传器容器中删除上传的媒体元素。感谢this question and the answer我可以弄清楚实际的过程。

Answer 2

那些在为非管理员用户工作时遇到问题的人;请使用admin-ajax.php而不是admin-post.php。

我遇到了一个奇怪的问题，即admin-post.php适用于本地服务器上的非管理员用户;但我的直播服务器拒绝让非管理员上传文件。 php将回显整个页面而不是回显值。

我用admin-ajax.php替换了admin-post.php并上传了超酷的工作。

我希望这会有所帮助。

Answer 3

除非我误解了这个问题，否则添加到这篇文章的解决方案是错误的。基本上，该解决方案不适用于未以管理员身份登录的任何人。我花了30分钟才完成它，加上删除图像的解决方案不会将其从媒体库中删除。

如何在前端将Dropzonejs与wordpress媒体处理程序集成？

3 个答案: