WordPress 3.5媒體上傳器多個文件選擇

Question

我正在用自定義設置頁面構建WordPress主題。某些設置要求用戶上傳/添加一組圖像（多於1個）。媒體上傳器的默認行爲是上傳和/或選擇單個圖像並將其插入到帖子中。

我跟着this excellent guide使用媒體上傳器，它表明我應該能夠設置多個爲真，但它仍然只允許上傳或選擇單個文件。

這裏是我的代碼：

加載在需要的腳本，因爲這是一個自定義的設置頁面：

if(function_exists('wp_enqueue_media')){ 
    wp_enqueue_media(); 
}else{ 
    wp_enqueue_style('thickbox'); 
    wp_enqueue_script('media-upload'); 
    wp_enqueue_script('thickbox'); 
} 

的Javascript/jQuery的爲了顯示媒體上傳和處理所選擇的圖像：

var tgm_media_frame; 

$('.upload-images').click(function() { 

    if (tgm_media_frame) { 
    tgm_media_frame.open(); 
    return; 
    } 

    tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({ 
    multiple: true, 
    library: { 
     type: 'image' 
    }, 
    }); 

    tgm_media_frame.on('select', function(){ 
    var selection = tgm_media_frame.state().get('selection'); 
    selection.map(function(attachment) { 
     attachment = attachment.toJSON(); 
      console.log(attachment); 
      // Do something with attachment.id and/or attachment.url here 
    }); 
    }); 

    tgm_media_frame.open(); 

}); 

有沒有人能夠獲得多個文件選擇正常工作？我錯過了什麼嗎？謝謝！

Answer 1

更新

我覺得媒體上傳已經更新，因爲問題提出和回答。我猜在以前版本的wordpress multiple: 'add'選項不存在，正如其他用戶所建議的。我不確定。

---

一切都很好，你的代碼。只有一小部分失蹤。

selection.map(function(attachment) { 
    attachment = attachment.toJSON(); 
    $("#something").after("<img src=" +attachment.url+">"); 
}); 

attachment後轉換toJSON您可以使用它作爲文件中提到。您可以將圖片網址放入發佈到服務器的某些隱藏字段中，並將選定圖片同時顯示給用戶。

只是一個小事情，我覺得不可思議的是，我們需要按CTRL +點擊選擇圖像。它應該是相當複選框或其他東西。

---

更新

CTRL + 點擊或移 + 點擊用於選擇多個圖像是wordpress的給予方式。仔細看看，開

... \ WP-包括\ JS \媒體views.js

有定義的函數 - toggleSelectionHandler。它監聽按鍵組合用戶已按下並據此調用其他改變某些類別的功能並導致實際選擇。

檢查到firbug後，你可以看到兩個類應用 -

1. selected
2. details

details類定義樣式當前點擊/主動式選擇（藍色粗邊框）和selected實際上將圖像標記爲選中並將其返回選擇數組。

您可以從該文件本身更改該行爲，也可以編寫自己的函數來處理選擇。第一種方法雖然不好。

PS：Wordpress實際上並未使用上述文件。它選擇相同文件的壓縮版本。所以你可能想要加載未壓縮的文件並進行遊戲。您可以強制WordPress的通過wp-config.php設置

define('SCRIPT_DEBUG', true); 

使用未壓縮的js文件。這會跳過load-scripts.php的行爲（通過合併將每個js文件的壓縮版本壓縮到單個文件中）。

Answer 2

如果有人想知道如何做到這一點，一種方法是這樣的。請注意，它將完全覆蓋其實施範圍內的默認行爲。

wp.media.view.Attachment.prototype.toggleSelectionHandler = function(event) { 
    var method = 'between'; 
    if (event.shiftKey) { 
     method = 'between'; 
    } else { 
     method = 'toggle'; 
    } 

    this.toggleSelection({ 
     method: method 
    }); 
}; 

如果multiple設置爲true那麼這將允許您選擇多個項目，如在畫廊屏幕。

Answer 3

您只需將multiple:true更改爲multiple:'add'即可。這是默認創建圖庫的工作原理。