اجزای "ناحیه رها کردن" یک راه آسان برای پیادهسازی قابلیت آپلود فایل در وب اپلیکیشن ارائه میدهد. این مثال نشان میدهد چگونه یک "ناحیه رها کردن" برای آپلود تک فایل با گزینههای تنظیم محدودیتهای آپلود فایل و اضافه کردن سربرگهای اضافی ایجاد کنید.
HTMLOpenTagform
data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
HTMLOpenTagdiv class="fallback"HTMLCloseTag
HTMLOpenTaginput
name="file"
type="file"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
class="dz-message"
data-dz-message
HTMLCloseTag
HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
فایلها را اینجا رها کنید یا برای آپلود کلیک کنید.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
این فقط یک ناحیه رها کردن نمونه است. فایلهای انتخاب شده
HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
uploaded.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
اجزای "ناحیه رها کردن" سادهترین راه برای پیادهسازی آپلود تک فایل در وب اپلیکیشن شما را فراهم میکند. با این حال، لازم است به یاد داشته باشید که فایلهای انتخاب شده در این نمونه واقعی به سرور آپلود نمیشوند. برای فعال کردن آپلود واقعی فایل و بهبود قابلیتهای پردازش فایل، مؤلفه "ناحیه رها کردن" را بر اساس نیازهای خود سفارشیسازی کنید. در این مثال، یک "ناحیه رها کردن" برای آپلود تک فایل با یک رابط کاربری اطلاعاتی ایجاد شده است.
اجزای "ناحیه رها کردن" یک راه آسان برای پیادهسازی قابلیت آپلود چند فایل در وب ارائه میدهند. این نمونه نشان میدهد که چگونه میتوانید یک "ناحیه رها کردن" برای آپلود چند فایل، با گزینههای تنظیم محدودیتهای آپلود فایل و سربرگهای اضافی، ایجاد کنید.
HTMLOpenTagform
data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
HTMLOpenTagdiv class="fallback"HTMLCloseTag
HTMLOpenTaginput
name="file"
type="file"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
class="dz-message"
data-dz-message
HTMLCloseTag
HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
فایلها را اینجا رها کنید یا برای آپلود کلیک کنید.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
این فقط یک ناحیه رها کردن نمونه است. فایلهای انتخاب شده
HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
uploaded.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
اجزای "ناحیه رها کردن" یک راه آسان برای پیادهسازی آپلود چند فایل در وب ارائه میدهند. با این حال، مهم است به یاد داشته باشید که فایلهای انتخاب شده در این نمونه واقعی آپلود نمیشوند. شما میتوانید مؤلفه "ناحیه رها کردن" را برای فعال کردن آپلود واقعی فایل و بهبود قابلیتهای پردازش فایل برنامهی وب خود سفارشی کنید. در این مثال، یک "ناحیه رها کردن" برای آپلود چند فایل با یک رابط کاربری اطلاعاتی ایجاد شده است. با این حال، فایلهای انتخاب شده در واقع به یک سرور آپلود نمیشوند. برای اجازه آپلود فایل واقعی و بهبود قابلیتهای پردازش فایل، مؤلفه "ناحیه رها کردن" را به طور سفارشی تنظیم کنید.
کامپوننت "ناحیه رها کردن" به شما امکان میدهد تا قبل از آپلود فایل، اعتبارسنجی نوع فایل را انجام دهید. این مثال نشان میدهد که چگونه میتوانید یک "ناحیه رها کردن" با امکان اعتبارسنجی نوع فایل با استفاده از فرمتهای فایل پذیرفته شده ایجاد کنید.
HTMLOpenTagform
data-single="true" action="/file-upload" class="[&.dropzone]:border-2 [&.dropzone]:border-dashed dropzone [&.dropzone]:border-slate-300/70 [&.dropzone]:bg-slate-50 [&.dropzone]:cursor-pointer [&.dropzone]:dark:bg-darkmode-600 [&.dropzone]:dark:border-white/5 dropzone dropzone"
HTMLCloseTag
HTMLOpenTagdiv class="fallback"HTMLCloseTag
HTMLOpenTaginput
name="file"
type="file"
HTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv
class="dz-message"
data-dz-message
HTMLCloseTag
HTMLOpenTagdiv class="text-lg font-medium"HTMLCloseTag
فایلها را اینجا رها کنید یا برای آپلود کلیک کنید.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTagdiv class="text-gray-600"HTMLCloseTag
این فقط یک ناحیه رها کردن نمونه است. فایلهای انتخاب شده
HTMLOpenTagspan class="font-medium"HTMLCloseTagnotHTMLOpenTag/spanHTMLCloseTag actually
uploaded.
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/divHTMLCloseTag
HTMLOpenTag/formHTMLCloseTag
اجزای "ناحیه رها کردن" با اعتبارسنجی نوع فایل برای فرمتهای تصویر (JPEG، PNG و JPG) تنظیم شده است. با این تنظیم، کاربران تنها قادرند فایلهایی از نوعهای مشخص شده را آپلود کنند. شما میتوانید مؤلفه "ناحیه رها کردن" را با اعتبارسنجی فرمت فایل به عنوان نیازهای خود سفارشی کنید و به طور کامل کنترل کنید که کدام فایلها آپلود شوند.
در این بخش، اطلاعات جزئی در مورد ویژگیها، کلاسها و گزینههای موجود که میتوانید با اجزاء است. درک این خصوصیات برای سفارشی کردن و پیکربندی اجزاء برای مطابقت با نیازهای خاص شما ضروری است.
در زیر لیستی از ویژگیهایی که میتوان به اجزاء منتقل کرد، آمده است:
پراپ (Prop) | نوع (Type) | شرح |
---|---|---|
`options` | `DropzoneOptions` | گزینههای پیکربندی Dropzone. |
`getRef` | `(el: DropzoneElement) => void` | یک تابع که یک مرجع به عنصر Dropzone را دریافت میکند. |