前言介紹
- 這款 WordPress 外掛「WP Dropzone」是 2017-11-01 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 100 個安裝啟用數。
- 上一次更新是 2025-11-14，距離現在已有 103 天。
- 外掛最低要求 WordPress 6.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
- 有 4 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
nazsabuz |
外掛標籤
media | dropzone | file upload | image upload | media upload |
內容簡介
可以使用 WP Dropzone 將 Dropzone 整合到 WordPress 網站中。 WP Dropzone 允許您從任何帖子/頁面將文件上傳到 WordPress 媒體庫。它具有大量的選項和功能。
功能：
- 可自定義介面
- 檔案大小限制
- 最大檔案限制
- 檔案擴展名驗證
- 圖像裁剪調整大小
- 圖像品質降低
- 限制訪客用戶
- 支援本地的 Dropzone 事件
使用指南：
在您的帖子/頁面中使用 [wp-dropzone] 短代碼以顯示上傳區域。您也可以在您的模板文件中使用 echo do_shortcode('[wp-dropzone]'); 。
此外，該外掛還提供以下屬性：
- id：給上傳表單分配 ID。如果該字段為空，則會自動生成一個 ID。ID 應僅包含字母（a-z，A-Z）和數字（0-9）。例如： [wp-dropzone id="myID123"]
- callback：使用本地的 Dropzone 事件。有關詳細信息，請參閱 Dropzone 事件。例如： [wp-dropzone callback="success: function(file, response) { console.log(file) }"]
- title：上傳工具的標題。例如：[wp-dropzone title="Drop Files Here"]
- desc：上傳工具的描述。例如：[wp-dropzone desc="Your file will be uploaded to media"]
- border-width：上傳區域的邊框寬度。默認為“2”。例如：[wp-dropzone border-width="2"]
- border-style：上傳區域的邊框樣式。可以是：none、hidden、dotted、dashed、double、groove、ridge、inset、outset、initial、inherit 等。默認為“solid”。例如：[wp-dropzone border-style="dashed"]
- border-color：上傳區域的邊框顏色。使用十六進制顏色代碼。默認值為“＃B0B0B1”。例如：[wp-dropzone border-color="#dd102d"]
- background：上傳區域的背景顏色。使用十六進制顏色代碼。默認為“＃fff”。例如：[wp-dropzone background="#fbfbfb"]
- margin-bottom：在上傳下方添加邊距。默認為“0”。例如：[wp-dropzone margin-bottom="10px"]
- max-file-size：限制最大檔案大小。默認值基於您的服務器設置（php.ini）。例如：[wp-dropzone max-file-size="2"] // 將最大檔案大小設置為2MB
- remove-links：添加文件刪除/取消按鈕。可以是「true」或「false」。默認值為「false」。例如：[wp-dropzone remove-links="true"]
- clickable：如果設置為 true，則可單擊上傳區域。如果設置為 false，則必須將文件拖到上傳區域才能上傳文件。默認值為「true」。例如：[wp-dropzone clickable="false"]
- accepted-files：指定上傳工具接受的檔案類型。一些有效的類型為：audio/ *、video/ *、image/ * 或檔案擴展名，例如：.gif、.jpg、.png、.doc。例如：[wp-dropzone accepted-files="image/*"] // 只接受影像檔案
- max-files：定義允許上傳的檔案數量。例如：[wp-dropzone max-files="1"] // 只允許上傳一個檔案
- max-files-alert：超出最大檔案限制時顯示警報。例如：[wp-dropzone max-files="1" max-files-alert="One file is enough!"] // 當超過一個文件時顯示警報
- auto-process：如果設置為 false，您必須單擊上傳按鈕才能上傳所選擇的檔案。默認值為「true」。例如：[wp-dropzone auto-process="false"]
- upload-button-text：設置上傳按鈕文本。
原文外掛簡介
WP Dropzone integrates the powerful Dropzone.js library with WordPress, allowing you to upload files directly into the WordPress media library from any post, page, or front-end location. The plugin provides a modern, user-friendly drag-and-drop interface with extensive customization options and advanced features for file management.
Key Features
Drag & Drop Interface – Modern, intuitive file upload experience
Customizable Styling – Full control over appearance with CSS customization
File Validation – Built-in file type and size validation
Image Processing – Automatic image resizing, cropping, and quality optimization
Thumbnail Generation – Customizable thumbnail previews
Security Features – Nonce verification and user permission checks
Action Hooks – WordPress hooks for customization and integration
Translation Ready – Full internationalization support
Performance Optimized – Assets loaded only when needed
Shortcode Usage
Insert the dropzone anywhere in your posts, pages, or templates with the shortcode:
[wp-dropzone]
Or in PHP templates:
Shortcode Attributes
The following attributes can be used with the [wp-dropzone] shortcode:
id – Unique identifier for the dropzone instance (Default: Auto-generated)
Example: [wp-dropzone id="myUploader"]
title – Title displayed above the dropzone (Default: Empty)
Example: [wp-dropzone title="Drop Files Here"]
desc – Description text for the dropzone (Default: Empty)
Example: [wp-dropzone desc="Upload your files here"]
accepted-files – Allowed file types (Default: All files)
Example: [wp-dropzone accepted-files="image/*"]
max-files – Maximum number of files (Default: Unlimited)
Example: [wp-dropzone max-files="3"]
auto-process – Auto-upload files when dropped (Default: true)
Example: [wp-dropzone auto-process="false"]
clickable – Make dropzone clickable (Default: true)
Example: [wp-dropzone clickable="false"]
remove-links – Show remove file buttons (Default: false)
Example: [wp-dropzone remove-links="true"]
upload-button-text – Text for manual upload button (Default: “Upload Files”)
Example: [wp-dropzone upload-button-text="Upload Selected Files"]
resize-width – Resize images to specified width (Default: Original)
Example: [wp-dropzone resize-width="800"]
resize-height – Resize images to specified height (Default: Original)
Example: [wp-dropzone resize-height="600"]
resize-quality – Image quality (0.1-1.0) (Default: 0.8)
Example: [wp-dropzone resize-quality="0.9"]
resize-method – Resize method: contain/crop (Default: contain)
Example: [wp-dropzone resize-method="crop"]
thumbnail-width – Thumbnail width in pixels (Default: 120)
Example: [wp-dropzone thumbnail-width="150"]
thumbnail-height – Thumbnail height in pixels (Default: 120)
Example: [wp-dropzone thumbnail-height="150"]
thumbnail-method – Thumbnail method: contain/crop (Default: crop)
Example: [wp-dropzone thumbnail-method="contain"]
Styling Options
The following styling attributes can be used to customize the dropzone appearance:
border-width – Border width
Example: [wp-dropzone border-width="3px"]
border-style – Border style (solid, dashed, etc.)
Example: [wp-dropzone border-style="dashed"]
border-color – Border color (hex code)
Example: [wp-dropzone border-color="#007cba"]
background – Background color (hex code)
Example: [wp-dropzone background="#f0f0f1"]
margin-bottom – Bottom margin
Example: [wp-dropzone margin-bottom="20px"]
Advanced Features
Action Hooks
The plugin provides several action hooks for customization:
// Before file upload
do_action( 'wp_dropzone_before_upload_file', $file );
// After file upload
do_action( 'wp_dropzone_after_upload_file', $file );
// After media library insertion
do_action( 'wp_dropzone_after_insert_attachment', $attachment_id );
JavaScript Integration
Access dropzone instance and events:
// Get dropzone instance
var dropzone = Dropzone.forElement("#wp-dz-yourID");
// Add event listeners
dropzone.on("success", function(file, response) {
console.log("File uploaded:", response);
});
Examples
Basic Image Upload
[wp-dropzone accepted-files="image/*" max-files="5" title="Upload Images"]
Document Upload with Restrictions
[wp-dropzone accepted-files=".pdf,.doc,.docx" title="Upload Documents" desc="PDF, DOC, DOCX files only"]
Styled Upload Area
[wp-dropzone title="Drop Files Here" desc="Drag and drop files or click to browse" border-style="dashed" border-color="#007cba" background="#f8f9fa"]
Manual Upload Button
[wp-dropzone auto-process="false" upload-button-text="Upload Selected Files" title="Select Files"]
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「WP Dropzone」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.4 | 1.0.5 | 1.0.6 | 1.1.0 | 1.1.1 | trunk |
延伸相關外掛（你可能也想知道）
Safe SVG 》Safe SVG 可以讓你安心地在 WordPress 中上傳 SVG 檔案！, 它能夠讓你允許上傳 SVG 檔案的同時，確保它們已經經過消毒以防止 SVG/XML 弱點影響你的網站。此外...。
FileBird – WordPress Media Library Folders & File Manager 》Media Folder 是史上最佳的 WordPress 外掛，可讓您使用資料夾對媒體庫進行分類。, 我們可以使用拖放式組織方式整理 WordPress 媒體庫資料夾。, 試用 | 升級...。
Media Cleaner: Clean your WordPress! 》Media Cleaner 是一個強大的外掛，它可以幫助你清理 WordPress 媒體庫中未使用的媒體條目和文件，以及修復損壞的條目。內置回收站功能讓你可以在永久刪除之前...。
Media Library Assistant 》媒體庫助手提供多個增強功能，方便管理媒體庫，其中包括：, , , , [mla_gallery] 短碼，在文章、頁面或自訂文章類型中使用，添加圖片和/或其他媒體庫項目（...。
Default Featured Image 》在媒體設定頁面上新增一個預設的特色圖像。如果沒有設定任何特色圖像，這個預設的特色圖像就會顯示。就這麼簡單。, 查看常見問題以獲取基本問題資訊。, 如果...。
Add From Server 》這個外掛提供有限的支援。請不要期望有太多新功能或修正 bug。功能可能隨時被移除。, Add From Server 外掛旨在幫助緩解不好的網站主機所造成的困擾，讓您可...。
Phoenix Media Rename 》通過使用「Phoenix Media Rename」外掛，將您的媒體檔案重新命名，極大地提高您的 SEO。, 在Phoenix Media Rename 官方頁面上提供了完整的使用和設置指南。。
Reveal IDs 》WordPress 2.5版本發佈後，所有管理頁面的ID都被刪除了。這應該是因為普通用戶不需要它們。但對於高級WordPress用戶和開發人員來說，這些ID對某些外掛或模板...。
Media Sync 》您可以掃描所有在uploads目錄中的檔案，並查看哪些檔案實際上在媒體庫中，哪些檔案只是停留在那裡。然後，您可以選擇要將哪些檔案導入數據庫，從而使它們在媒...。
Media File Renamer: Rename for better SEO (AI-Powered) 》從儀表板直接重命名和移動檔案，可以逐個或批量進行操作，還可以設置自動重命名檔案的功能，提高 SEO、整理 WordPress、讓生活更美好。如需更多信息，請訪問...。
Easy Watermark 》Easy Watermark 可以在圖片上傳到 WordPress 媒體庫時自動加上浮水印。您還可以手動添加浮水印到現有的圖片（全部一次或每個圖片）。浮水印可以是圖像、文字...。
Clean Image Filenames 》這個外掛可以在您上傳至媒體庫時自動將檔名中的語言重音符號轉換。轉換後的字符將會變成網頁和伺服器友好、無語言重音的字元。, 功能, , 將瑞典語、丹麥語、...。
Search & Replace Everything by WPCode – Find and Replace Media, Text, Links, and More 》```html, <ul>, <li>WPCode 的 Search & Replace Everything 讓您可以直接從 WordPress 管理員有效管理網站的內容。這個工具對於網站遷移、...。
WP User Avatars 》允許註冊使用者上傳並選擇自己的頭像。, 建議外掛, 如果您喜歡這個外掛，您可能會喜歡以下這些外掛！, , WP User Profiles, WP User Activity, WP User Avata...。
Media Library Categories 》此外掛可允許在 WordPress 媒體庫中使用分類。啟用後，媒體庫中會顯示下拉式的分類清單。, 您可以使用大量動作進行多項目的分類更改、新增或移除分類。, 在使...。