如何在前端集成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並上傳超酷工作。

我希望這會有所幫助。