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

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.您可以拥有要处理该操作的自定义文件.但我发现了另一种方式.

从这个问题和我发现使用admin-post.php文件的答案是非常惊人的.

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

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

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部分.我马上就完成了.

UPDATE

帖子已更新.现在我们可以从上传器容器中删除上传的媒体元素.感谢这个问题和答案,我可以找出实际的过程.