[WordPress] 外掛分享： WP Dropzone

前言介紹

  • 這款 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 |

延伸相關外掛（你可能也想知道）

  • Increase Maximum Upload File Size 》這個外掛是用於增加媒體上傳文件大小限制。, 插件功能：, 1）只需在後台啟用，自動將最大上傳文件大小從2MB增加到75MB, 2）不需要任何設置。, 參與其中, Viit...。
  • Filestack WP Upload 》使用 Filestack WordPress 上傳外掛後，你或你的使用者可以直接從本地硬碟和雲端硬碟（包括 Facebook、Instagram、Google Drive、Google 圖片搜索、Google 相...。
  • WP Copyright 》這個外掛程式可以作為一個獨立而高效的工具，在必須確保圖像版權信息強制要求的網站上使用。, 它的工作原理是：它簡單地模糊所有上傳的圖像。當版權信息被設...。
  • Contributors Media Upload by Mstoic 》這個外掛程式可以讓貢獻者上傳媒體檔案。預設情況下，貢獻者無法上傳媒體檔案，但此外掛程式可以讓他們輕易操作。。
  • SVGPlus 》**總結：**, , SVGPlus 是一款全面的 WordPress 外掛程式，旨在強化您的網站以安全和高效地處理 SVG（可縮放的向量圖形）文件。無論您是設計師、開發人員還是...。
  • WP Manager – One click Max Upload File Size fixer 》這是 WordPress 最佳的管理外掛，可以增加媒體上傳檔案大小等多種功能。, 外掛功能：, 1) 後台啟用後，最大上傳檔案大小會自動從 2MB 增加至 75MB, 參與其中。

文章
Filter
Apply Filters
Close
Mastodon