این مثال یک فایل را با استفاده از کتابخانه dropzone js بارگذاری می کند. به طور پیش فرض، dropzone فایل آپلود چندگانه است و گزینه خاصی ندارد که ما بتوانیم به حالت آپلود فایل تک تغییر دهیم، اما این قابلیت را می توان با افزودن گزینه های بیشتر به تنظیمات پلاگین، مانندmaxfilesexceeded فرخوان وmaxFiles گزینه به 1 تنظیم شده استmaxFiles: 1استفاده می شود به declzone که تنها یک فایل باید وجود داشته باشد. هنگامی که بیش از 1 فایل تابع وجود داردmaxfilesexceeded با فراخوانی پرونده در اولین پارامتر نامیده می شود. در حال حاضر تنها 1 فایل را می توان انتخاب کرد و آن را جایگزین به یکی دیگر به جای اضافه کردن آن به پیش نمایش.
این مثال یک فایل چندگانه را با استفاده از کتابخانه dropzone js بارگذاری می کند. به طور پیش فرض، dropzone فایل آپلود کننده چندگانه است. کاربر می تواند بر روی ناحیه dropzone کلیک کند و چندین فایل را انتخاب کند یا فقط تمام فایل های انتخاب شده را در منطقه dropzone بریزید. این مثال ساده ترین تنظیم برای dropzone است.
این مثال یک فایل چندگانه را با استفاده از کتابخانه dropzone js بارگذاری می کند. با استفاده از این روش، کاربر می تواند گزینه ای برای انتخاب فایل ها با استفاده از یک دکمه داشته باشد و تمام فایل ها را پس از انتخاب پوشه ها حذف کند. شما باید تعریف کنیدdropzone وpreviewsContainer عناصر برای نشان دادن پیش نمایش ریز عکسها. همچنین تنظیمclickable برای مطابقت با شناسه دکمه برای دکمه برای کار به عنوان انتخابگر فایل.
در بسیاری از موارد کاربر باید محدود به آپلود برخی از هیچ. از فایل ها شما همیشه می توانید تنظیم کنیدmaxFilesگزینه ای برای محدود کردن شماره از فایل آپلودmaxfilesexceeded اگر آپلود بیش از حد باشد، رویداد نامیده می شود. همچنین، اگر می خواهید حجم فایل آپلود را محدود کنید، سپس آن را تنظیم کنیدmaxFilesize گزینه. حداکثر اندازه فایل را در MB ها مانند0.5 MB در این مثال است. کاربر همچنین می تواند تعریف کندmaxThumbnailFilesizeدر MB هنگامی که فایل آپلود از این حد بالاتر است، تصویر کوچک تولید نخواهد شد.
اجرای پیش فرض ازaccept نوع MIME پرونده یا فرمت در مقابل این لیست را بررسی می کند. این یک لیست کاما از هم جدا از انواع MIME یا پسوند فایل است. به عنوان مثال :image/*,application/pdf,.psd. If the Dropzone is clickableاین گزینه به عنوان مورد استفاده قرار خواهد گرفت accept پارامتر در ورودی فایل پنهان نیز هست.
این مثال اجازه می دهد تا کاربر هر فایل را از همه فایل های آپلود حذف کند. این یک لینک برای هر پیش نمایش پرونده برای حذف یا لغو (اگر قبلا آپلود) فایل باشد. اینdictCancelUpload, dictCancelUploadConfirmation وdictRemoveFile گزینه ها برای اصطلاحات استفاده می شود.
این مثال اجازه می دهد تا کاربر یک دکمه ای ایجاد کند که همه فایل ها را از یک dropzone حذف کند. برای رویداد کلیک روی دکمه گوش دهید و سپس تماس بگیریدremoveAllFiles روش برای حذف همه فایل ها از dropzone.
- اگر شما نمی خواهید پیام پیش فرض در همه («فایل های قطره برای آپلود (یا کلیک کنید)»)، شما می توانید عنصر داخل عنصر dropzone خود را با کلاس قرار دهید
dz-messageو قطره زمین برای شما پیام ایجاد نمی کند. - Dropzone هر زمینه ی پنهانی را که در فرم dropzone شما دارید، ارسال می کند. بنابراین این روش آسان برای ارسال اطلاعات اضافی است. شما همچنین می توانید از
paramsگزینه. - Dropzone به داده ها اضافه می کند
fileشی شما می توانید هنگام وقوع حادثه استفاده کنید. شما می توانید دسترسی پیدا کنیدfile.widthوfile.heightاگر این یک تصویر است، همچنینfile.uploadکه یک شیء شامل: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 را برای بدن ترسیم کنید و تعریف کنید
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 }); - نگاه کن به ویکی گیت بابi برای نمونه های بیشتر
