آپلود فایل

آپلود تصویر به همراه بهینه سازی

کامپوننت سایت

میبایست باتوجه به قرارگیری، فایل های css و js پلاگین Filepond را در سورس فایل HTML مورد نظر قرار دهید. Filepond دارای افزونه های زیادی است که عملکرد آن را افزایش می دهد. توجه داشته باشید ، باید افزونه ها را قبل از فایلهای اصلی Filepond لینک دهید. از این صفحه به عنوان مرجع استفاده کنید. در زیر لیستی از افزونه هایی است که در نسخه نمایشی خود استفاده کردیم:

اعتبار سنجی نوع فایل (filepond-plugin-file-validate-type.min.js)
اعتبار سنجی سایز فایل (filepond-plugin-file-validate-size.min.js)
پیش نمایش تصویر (filepond-plugin-image-preview.min.js)
کراپ(crop) تصویر(filepond-plugin-image-crop.min.js)
تغییر اندازه تصویر (filepond-plugin-image-resize.min.js)
تبدیل تصویر (filepond-plugin-image-transform.min.js)
اسکریپت اصلی پلاگین Filepond (filepond.min.js)

توجه داشته باشید ، افزونه ها باید قبل از اسکریپت اصلی Filepond در فایل شما قرار بگیرند.

لیست کامل همه افزونه های Filepond موجود را میتوانید با کلیک روی لینک مشاهده نمایید.

میتوانید با استفاده از attributesهای تعریف شده در قطعه کدهای خود روندبارگذاری فایل را تغییر دهید. `<input type="file" class="file-uploader">`.

multiple — امکان بارگذاری چندین فایل را فراهم می کند (افزونه Core)
accept="image/png, image/jpeg, video/mp4..." — مشخص کنید که چه نوع فایلی باید پذیرفته شود (افزونه اعتبارسنجی نوع فایل).
data-style-panel-layout="compact" — نمایش پیش نمایش تصویر در سایز بزرگ تر
data-max-file-size="100KB" — حداکثر اندازه فایل مجاز (افزونه اعتبارسنجی اندازه فایل).
data-max-files="5" — حداکثر تعداد فایل در هر بارگذاری (افزونه Core).
data-label-idle — نمایش وضعیت آپلود فایل (افزونه Core).
data-image-preview-height — عدد. حداکثر ارتفاع تصویر پیش نمایش (افزونه پیش نمایش تصویر).
data-image-crop-aspect-ratio="1:1" — تصویر را به نسبت ابعاد خاصی برش می دهد (افزونه برش تصویر).
data-image-resize-target-width — عدد. تغییر اندازه تصویر در عرض معینی (افزونه تغییر اندازه تصویر).
data-image-resize-target-height — عدد. تغییر اندازه تصویر در ارتفاع مشخص (افزونه تغییر اندازه تصویر).

کلاس تعریف شده css:

file-uploader-grid — پیش نمایش تصاویر را در یک شبکه بر خلاف لیست به طور پیش فرض تبدیل می کند.

دانلود فایل هاhttps://pqina.nl/filepond/docs/

آپلود فایل تصویر با امکان تغییر سایز و برش

<!-- Single file upload: Image only + Cropped + Resized (Profile picture) -->
<input class="file-uploader bg-secondary" type="file" accept="image/png, image/jpeg" data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span class="fw-bold">Change picture</span>' data-style-panel-layout="compact" data-image-preview-height="160" data-image-crop-aspect-ratio="1:1" data-image-resize-target-width="200" data-image-resize-target-height="200">

<!-- Light skin -->
<input class="file-uploader border-light bg-faded-light" type="file" accept="image/png, image/jpeg" data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-light mb-2"></i><br><span class="fw-bold text-light opacity-70">Change picture</span>' data-style-panel-layout="compact" data-image-preview-height="160" data-image-crop-aspect-ratio="1:1" data-image-resize-target-width="200" data-image-resize-target-height="200">

// Single file upload: Image only + Cropped + Resized (Profile picture)
input(type="file", accept="image/png, image/jpeg", data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-muted mb-2"></i><br><span class="fw-bold">Change picture</span>', data-style-panel-layout="compact", data-image-preview-height="160", data-image-crop-aspect-ratio="1:1", data-image-resize-target-width="200", data-image-resize-target-height="200").file-uploader.bg-secondary

// Light skin
input(type="file", accept="image/png, image/jpeg", data-label-idle='<i class="d-inline-block fi-camera-plus fs-2 text-light mb-2"></i><br><span class="fw-bold text-light opacity-70">Change picture</span>', data-style-panel-layout="compact", data-image-preview-height="160", data-image-crop-aspect-ratio="1:1", data-image-resize-target-width="200", data-image-resize-target-height="200").file-uploader.border-light.bg-faded-light

آپلود چندین نوع فایل با اعتبار سنجی کیفیت

<!-- Multiple file upload: Grid of files + File type, size and quantity validation (Gallery) -->
<input class="file-uploader file-uploader-grid" type="file" multiple data-max-files="4" data-max-file-size="2MB" accept="image/png, image/jpeg, video/mp4, video/mov" data-label-idle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div>or drag them in</div>'>

<!-- Light version -->
<input class="file-uploader file-uploader-grid border-light bg-faded-light" type="file" multiple data-max-files="4" data-max-file-size="2MB" accept="image/png, image/jpeg, video/mp4, video/mov" data-label-idle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div class="text-white opacity-70">or drag them in</div>'>

// Multiple file upload: Grid of files + File type, size and quantity validation (Gallery)
input(type="file", multiple, data-max-files="4", data-max-file-size="2MB", accept="image/png, image/jpeg, video/mp4, video/mov", data-label-idle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div>or drag them in</div>').file-uploader.file-uploader-grid

// Light version
input(type="file", multiple, data-max-files="4", data-max-file-size="2MB", accept="image/png, image/jpeg, video/mp4, video/mov", data-label-idle='<div class="btn btn-primary mb-3"><i class="fi-cloud-upload me-1"></i>Upload photos / video</div><div class="text-white opacity-70">or drag them in</div>').file-uploader.file-uploader-grid.border-light.bg-faded-light