آپلود فایل تکی

این نمونه یک فایل تکی را با استفاده از کتابخانه dropzone js ارسال می کند. به صورت پیش فرض dropzone یک ارسال کننده فایل چندگانه است و گزینه مشخصی برای تبدیل آن به حالت ارسال تکی فایل ندارد اما این قابلیت میتواند با افزودن گزینه های بیشتر به پلاگین مانند تنظیم گزینه های maxfilesexceeded و maxFiles به 1 بدست آید. maxFiles: 1 به dropzone می گوید که تنها یک فایل باید باشد. وقتی بیش از یک فایل باشد فانکشن maxfilesexceeded با داشتن فایل اضافی در پارامتر اول فراخوانی می شود. اکنون فقط یک فایل می تواند انتخاب شود و در صورت انتخاب فایل دیگر جایگزین میشود به جای اینکه به پیش نمایش اضافه شود.

فایل های خود را برای ارسال به اینجا بکشید

آپلود فایل چندتایی

این نمونه فایل های چندگانه را توسط کتابخانه dropzone js ارسال می کند. به صورت پیش فرض dropzone یک ارسال کننده فایل چندگانه است. کاربر می تواند یا در ناحیه dropzone کلیک کرده و چند فایل انتخاب کند و یا همه فایل های انتخاب شده را در ناحیه dropzone کشیده و رها کند. این نمونه پایه ای ترین حالت dropzone است.

فایل های خود را برای ارسال به اینجا بکشید

استفاده از دکمه برای انتخاب فایل ها

این نمونه فایل های چندگانه را توسط کتابخانه dropzone js ارسال میکند. با استفاده از این متد، کاربران یک گزینه برای انتخاب فایل ها توسط یک دکمه به جای کشیدن و رها کردن همه فایل ها مشاهده میکنند. شما باید المان های dropzone و previewsContainer را برای نمایش پیش نمایش های بند انگشتی تعریف کنید. همچنین clickable را برابر با ID دکمه تنظیم کنید تا دکمه به عنوان انتخابگر فایل کار کند.

فایل های خود را برای ارسال به اینجا بکشید

محدودیت اندازه و تعداد فایل ها

در بسیاری از موارد کاربر باید به ارسال تعداد محدودی فایل محدود شود. شما همواره میتوانید گزینه maxFiles را برای محدود کردن تعداد فایل های قابل ارسال تنظیم کنید. رویداد maxfilesexceeded در صورتی که تعداد فایل های ارسال شده بیش از محدودیت تعریف شده باشد اجرا می شود. همچنین در صورتی که بخواهید اندازه فایل های ارسال شده را محدود کنید میتوانید گزینه maxFilesize را تنظیم کنید. حداکثر اندازه قابل قبول فایل را با واحد مگابایت تنظیم کنید مانند 0.5 مگابایت که در این نمونه تنظیم شده است. همچنین میتوانید حداکثر اندازه فایل بندانگشتی را توسط گزینه maxThumbnailFilesize با واحد مگابایت تنظیم کنید. وقتی فایل های ارسال شده از این محدودیت فراتر روند تصاویر بند انگشتی ایجاد نخواهند شد.

فایل های خود را برای ارسال به اینجا بکشید

فایل های پذیرفته شده

پیاده سازی پیش فرض accept ، mimt type یا پسوند فایل را با این لیست بررسی می کند. این یک لیست از mime type ها و یا پسوند ها می باشد که توسط کاما از هم جدا شده اند. برای مثال: image/*,application/pdf,.psd. اگر Dropzone به صورت clickable باشد این گزینه به عنوان پارامتر accept بر روی input مخفی فایل نیز استفاده خواهد شد.

فایل های خود را برای ارسال به اینجا بکشید

حذف تصویر بندانگشتی

این نمونه به کاربران اجازه میدهد که هر فایلی را از فایل های ارسال شده حذف کند. این یک لینک به پیش نمایش هر فایل برای حذف یا لغو ارسال (در صورت آغاز آپلود) فایل اضافه میکند. گزینه های dictCancelUpload, dictCancelUploadConfirmation و dictRemoveFile برای این هدف استفاده شده اند.

فایل های خود را برای ارسال به اینجا بکشید

حذف همه تصاویر بندانگشتی

این نمونه به کاربران اجازه میدهد که یک دکمه برای حذف همه فایل ها از dropzone داشته باشند. رویداد کلیک دکمه را گوش کنید و سپس متد removeAllFiles را برای حذف همه فایل ها از dropzone فراخوانی کنید.

فایل های خود را برای ارسال به اینجا بکشید

نکات

  • اگر پیغام پیش فرض را نمیخواهید (»فایل های خود را برای ارسال به اینجا بکشید«) ، می توانید یک المان با کلاس dz-message داخل المان dropzone قرار دهید و dropzone پیغام مورد نظر شما را به جای آن نمایش خواهد داد.
  • Dropzone هر فیلد مخفی که داخل فرم dropezone داشته باشید را ثبت می کند. بنابراین این یک راه آسان برای ثبت اطلاعات اضافی می باشد. همچنین میتوانید از گزینه params استفاده کنید.
  • Dropzone اطلاعاتی را به آبجکت file اضافه میکند که میتوانید هنگام اجرای رویداد ها استفاده کنید. می توانید به file.width و file.height در صورتی که یک فایل تصویر باشد دسترسی داشته باشید، همچنین file.upload یک object شامل: progress (0-100), total (کل بایت ها) و bytesSent.
  • اگر میخواهید اطلاعاتی را به ارسال فایل اضافه کنید که برای هر فایل منحصر به فرد است میتوانید از رویداد sending استفاده کنید:
                                        
                                            myDropzone.on("sending", function(file, xhr, formData) {
                                                // Will send the filesize along with the file as POST data.
                                                formData.append("filesize", file.size);
                                            });
                                        
    								
  • برای دسترسی به html پیش نمایش فایل میتوانید به file.previewElement دسترسی پیدا کنید. برای مثال:
                                        
                                            myDropzone.on("addedfile", function(file) {
                                                file.previewElement.addEventListener("click", function() {
                                                    myDropzone.removeFile(file);
                                                });
                                            });
                                        
    								
  • اگر میخواهید کل صفحه یک dropzone باشد و فایل ها را در یک جای دیگر نمایش دهد میتوانید به سادگی یک آبجکت dropzone به body صفحه instantiate کنید و گزینه previewsContainer را تنظیم کنید. previewsContainer باید کلاس dropzone-previews یا dropzone را برای نمایش صحیح پیش نمایش فایل ها داشته باشد.
                                        
                                            new Dropzone(document.body, {
                                                previewsContainer: ".dropzone-previews",
                                                // You probably don't want the whole body
                                                // to be clickable to select files
                                                clickable: false
                                            });
                                        
    								
  • برای نمونه های بیشتر اینجا را مشاهده کنید

سفارشی سازی قالب

سفارشی سازی کنید و به صورت زنده مشاهده کنید.
طرح قالب

رنگ های فهرست

جمع کردن فهرست

رنگ های نوار بالایی
نکته : این گزینه تنها در حالت نوار ثابت و در هنگام اسکرول صفحه نمایش داده خواهد شد.
نوع نوار بالایی

نوع فوتر

سایه کارت

مخفی سازی دکمه اسکرول به بالا
ارتباط با ما
امروز

How can we help? 😄

7:45 ق.ظ

Hey John, I am looking for the best admin template.

Could you please help me to find it out? 🤔

7:50 ق.ظ

Stack admin is the responsive bootstrap 4 admin template.

8:01 ق.ظ