如何在前端集成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;   
    } 
}); 

在上面我们做了什么是我们连接悬浮窗与我们的元素与一些参数 -

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

当然也有很多可供选择的删除图像，但我发现这些都是我需要设置我的拖拽最基本的参数n-drop媒体上传器。

现在最重要的是要决定文件上传网址。您可以在自己想要处理操作的位置拥有自定义文件。但我找到了另一种方式。

From this question and the answer我发现使用admin-post.php文件是相当了不起的。

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

所以我之前我的悬浮窗初始化初始化的变量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('wp_ajax.php?action=handle_dropped_media'), 
    'delete'=>admin_url('wp_ajax.php?action=handle_deleted_media'), 
) 
wp_localize_script('my-script','dropParam', $drop_param); 

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

以下功能将负责上传图像并作为附件保存在库中。

add_action('wp_ajax_handle_dropped_media', 'BMP_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', 'BMP_handle_dropped_media'); 



function BMP_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('admin_post_handle_delete_media', 'BMP_handle_delete_media'); 

function BMP_handle_delete_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

的职位将被更新。现在我们可以从上传容器中删除上传的媒体元素。感谢this question and the answer我可以找出实际的过程。

Answer 2

添加到这篇文章的解决方案是不正确的，除非我误解了这个问题。基本上，对于没有以管理员身份登录的人来说，解决方案不适用。我耗费了30分钟的时间来完成这项工作，而删除图像的解决方案并未将其从媒体库中删除。

Answer 3

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

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

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

我希望这会有所帮助。