آپلود کننده فایل - Dropzone

مهم!

  • اگر از عنصر فرم استفاده نمی‌کنید، فراموش نکنید که یک گزینه url را مشخص کنید، زیرا Dropzone نمی‌داند بدون مشخصه اقدام به کجا پست کند.
  • Dropzone آپلود فایل های شما در سرور را مدیریت نمی کند. Server side implementation for more information.

آپلود تک فایل

این مثال یک فایل را با استفاده از کتابخانه dropzone js آپلود می کند. maxfilesexceeded callback and maxFiles option set to 1. maxFiles: 1 is used to tell dropzone that there should be only one file. When there is more then 1 file the function maxfilesexceeded will be called, with the exceeding file in the first parameter. Now only 1 file can be selected and it will be replaced with another one instead of adding it to the preview.

فایل را در اینجا رها کنید یا برای آپلود کلیک کنید

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

این مثال چندین فایل را با استفاده از کتابخانه dropzone js آپلود می کند.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید

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

این مثال چندین فایل را با استفاده از کتابخانه dropzone js آپلود می کند. dropzone and previewsContainer elements to show preview thumbnails. Also set clickable to match the button's id for button to work as file selector.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید

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

در بسیاری از موارد کاربر باید محدود باشد تا شماره خاصی را آپلود کند. maxFiles option to limit no. of upload files. maxfilesexceeded event will be called if uploads exceeds the limit. Also, if you want to limit the file size of uploads then set the maxFilesize option. Define the maximum file size to be uploded in MBs like 0.5 MB as is in this example. User can also define maxThumbnailFilesize in MB. When the uploaded file exceeds this limit, the thumbnail will not be generated.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید

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

اجرای پیش فرضaccept checks the file's mime type or extension against this list. This is a comma separated list of mime types or file extensions. Eg.: image/*,application/pdf,.psd. If the Dropzone is clickable this option will be used as accept parameter on the hidden file input as well.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید

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

این مثال به کاربر اجازه می دهد تا هر فایلی را از همه فایل های آپلود شده حذف کند. dictCancelUpload, dictCancelUploadConfirmation and dictRemoveFile options are used for the wording.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید

حذف همه ریز عکسها

این مثال به کاربر اجازه می دهد تا دکمه ای ایجاد کند که تمام فایل ها را از یک dropzone حذف کند. removeAllFiles method to remove all the files from the dropzone.

فایل ها را اینجا رها کنید یا برای آپلود کلیک کنید
گزینه های رنگ نوار نوار

گزینه های طرح بندی

پس زمینه منوی نوار کناری


تصویر پس زمینه نوار کناری
background image
background image
background image
background image

Layout Builder را امتحان کنید