اسکریپت های رایگان آپلود فایل برای وب سایت ها

آیا می دانید در هر ثانیه تقریبا 1000 عکس در اینستاگرام آپلود می شود؟

این بدان معناست که وقتی خواندن این مقاله را به پایان رساندید، اینستاگرام نزدیک به 200،000 عکس بیشتر خواهد داشت. و این فقط یک پلت فرم آپلود فایل است. با این علاقه ای که به تصاویر در مردم وجود دارد، جای تعجب نیست که آپلود فایل برای اکثر وب سایت ها ضروری شده است. تقریبا هر سرویسی به شما امکان می دهد مطالب را آپلود کرده و آنها را دستکاری کنید. اما سایت های کمی به شما امکان آپلود تصاویر را می دهند. آپلود فایل فقط برای تصاویر استفاده نمی شوند. آنها برای کار با فرمت های مختلف، از جمله doc، pdf، txt، و غیره نیز طراحی شده اند. دو نمونه از اسکریپت های آپلود فایل که این اجازه را به شما می دهند عبارتند از: Fine Uploader و Droply.js.

Fine Uploader یک اسکریپت محبوب و آزمایش شده در طول زمان است که دارای ویژگی های مفید متعددی مانند نوار پیشرفت، منطقه کشیدن و رها کردن، قطعه قطعه کردن فایل ها، قابلیت اتصال به دوربین های موبایل و مهمتر از بررسی صحت فایل قابل آپلود پیش از انجام عملیات آپلود است. مورد آخر که بررسی فایل است به طور فزاینده ای حیاتی است چرا که می توانید محدودیت های اعمال شده برای اندازه، پسوند فایل، تعداد فایل های قابل آپلود به طور همزمان و ابعاد تصاویر را مشخص یا محدود کنید. علاوه بر این، حتی می توانید قوانین خود را برای اعتبار سنجی ایجاد کنید.

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

برخلاف مثال قبلی، Droply.js از پیچیدگی کمتری برخوردار است. به جرات می توانیم بگوییم که استفاده از این اسکریپت بسیار ساده است. با این حال، از jpg، mp4، mp3، png، gif، txt، doc، pdf و docx پشتیبانی می‌کند و دارای یک رابط کاربری بصری ساده و تمیز است که با فضای نسبتا بزرگی که برای رها کردن فایل‌ها می دهد، کار آپلود را برای کاربران راحت می کند. Droply.js تماما با jQuery نوشته و پیاده سازی می شود و به راحتی با فرم ها صفحات HTML می تواند به کار گرفته شود. Droply.js برای پروژه های کوچک و متوسط، کافی است.

این دو اسکریپت را که توضیح دادیم با DropZone.js و Filepondمقایسه کنید. این دو نیز دو تا دیگر از ابزارهای عالی و خارق العاده ای هستند که بارها امتحان خود را پس داده اند. ویژگی های آنها عبارتند از:

• یک رابط کاربردی و منظم بر اساس کشیدن و رها کردن
• پیش نمایش تصویر برای درک بهتر
• امکان آپلود فایل ها با تقسیم کردن آنها

این دو اسکریپت، سبک وزن و بدون وابستگی هستند و Filepond دارای ابزار بهینه سازی و تبدیل تصویر نیز است. با این حال، آنها از همه فرمت های عمومی فایل ها پشتیبانی نمی کنند و تنها به تصاویر محدود می شوند. این می تواند برای بسیاری از پروژه ها کافی باشد.

ابزار عالی دیگری که باید در نظر گرفت Uppy.ioاست. Uppy یک کتابخانه بارگذاری فایل قدرتمند است که می تواند فایل ها را از Google Drive، Instagram و Dropbox دریافت کند. مزیت اصلی آن این است که چندین پلاگین خارجی نیز دارد که می تواند عملکرد آن را تا حد زیادی بهبود بخشد.

گسترش عملکرد آپلود

آپلود فایل به صورت پیش فرض در HTML در دسترس است. و یک المان استاندارد DOM است. آپلود فایل HTML یک رابط ابتدایی دارد که به همراه یک دکمه نمایش داده می شود که یک پنجره محاوره ای را باز می کند که در آن می توانید یک فایل را انتخاب کنید. استایل ها و فونت های آن را به راحتی می توانید تغییر دهید. البته فقط ظاهر آن را می توانید شیک کنید و نه بیشتر.

همچنین می توانید از المان آپلود فایل، برای ارسال یک فایل به سمت سرور استفاده کنید و با یک زبان بک اند نظیر PHP فایل های آپلود شده را روی سرور ذخیره کنید. این البته روشی زمخت برای آپلود فایل است چرا که کاربرپسند نیست. صفحه وب پس از ارسال فایل، رفرش خواهد شد، فایل ها قابلیت تقسیم شدن و ارسال شدن را ندارند و یکجا ارسال خواهند شد. و هیچ روشی برای نمایش درصد پیشرفت آپلود، برای اینکار وجود ندارد.

اینطور به نظر می رسد که پلاگین های جاوا اسکریپت روش های فانتزی تری هستند که به کاربران اجازه می دهند به صورت کاربرپسند، فایل ها را آپلود کنند. با این حال، مزایای آنها بسیار بیشتر از اینها است. آنها نه تنها رابط کاربری چشم نوازی را ارائه می دهند، بلکه عملکردهای اساسی را نیز بهبود بخشیده و پیشرفت می دهند. اسکریپت ها با افزودن گزینه های اضافی مانند آپلود فایل از طریق Ajax یا بارگذاری های فایل روی یک دامنه دیگر (مانند اسکریپت SimpleUpload)، یک کتابخانه ساده و در عین حال قابل استفاده در جاوا اسکریپت، یا یک نشانگر درصد پیشرفت یا نمایش پیام های خطای سفارشی مانند چیزی که PekeUpload ارائه می دهد، امکانات فراوان و ویژگی های منحصر به فردی را به طراحان و کاربران خواهند داد.

PekeUpload، بسیار شبیه یک المان آپلود فایل HTML سفارشی است که با بوت استرپ ساخته شده است. از کلاس های آن استفاده می کند و می تواند به سرعت در هر پروژه ای به سادگی نصب و قابل استفاده شود.

ممکن است بخواهید بدانید که هنگام انتخاب یک اسکریپت آپلودکننده فایل چه چیزی را باید در نظر بگیرید؟ چند نکته مهم وجود دارد که باید آنها در نظر گرفته داشته باشید:

• فرمت های فایلی که آپلود کننده پشتیبانی می کند
• سازگاری بین مرورگرها
• امکان کشیدن و رها کردن فایل یا فایل ها
• بدون وابستگی به دیگر پلاگین ها
• ارائه API مفید
• آخرین مورد اما نه کم اهمیت تر از موارد بالا، داشتن مستندات

یک مورد دیگر که باید خود را برای آن آماده کنید، آشنایی با گزینه های پیکربندی و تنظیمات یک اسکریپت است. داشتن توانایی تعیین محدودیت برای اندازه و تعداد فایل‌ها برای آپلود همزمان بسیار حیاتی است. این اقدامات پیشگیرانه کوچک می تواند پلتفرم شما را از اقدامات غیرعمدی و یا عمدا مخرب برخی کاربران مصون نگه دارد.

راه حل های ساده

کسانی که Uppy.io را خیلی پیچیده می دانند، می توانند راه حل های ساده تری مانند آپلود کننده فایل HTML5، HTML5 Drag & Drop Ajax File Uploader یا jQuery Ajax File Uploader Widget را انتخاب کنند.

آپلود کننده فایل HTML5 یک کتابخانه جاوا اسکریپت بدون وابستگی است که در مرورگرهای مرسوم به خوبی کار می کند. امکانات زیادی ندارد، اما کاملا خوب کار می کند.

آخرین نکته، اما نه کم اهمیت تر از نکات دیگر

آپلودکننده های فایل یک المان عمومی هستند، به طوری که می توانید به راحتی یکی از آنها را خودتان ایجاد کنید. مقاله آموزشی بسیار خوبی توسط جوزف زیمرمن وجود دارد که در مجله Smashing منتشر شده است، "چگونه با جاوا اسکریپت خالی یک آپلود کننده فایل Drag-and-Drop بسازیم".

و اگر به دنبال یک آپلود کننده فایل ساده با طراحی زیبا هستید، به سایت Codepen نگاهی بیاندازید. همیشه آنجا هر چیزی را که بخواهید می توانید پیدا کنید. به این دو مورد نگاهی بیاندازید: بارگذاری فایل یا آپلودکننده فایل ریسپانسیو وجود دارد.

قطعه کد مت لیترلند مبتنی بر جاوا اسکریپت خالی است. دارای یک منطقه کشیدن و رها کردن و پیش نمایش تصویر است. در حالی که کدهای BurnaDLX دارای یک منطقه آپلود فایل ساده اما زیبا همراه با انیمیشن است.

خلاصه و کلام آخر

آپلود فایل یک المان رایج HTML است و برای کار کردن نیازی به دستکاری اضافی با زبان های سمت کلاینت مانند جاوا اسکریپت ندارد. بسیاری از توسعه دهندگان، سفارشی کردن و افزودن عملکردهای اضافی را به آن، کاری دشوار یا چالش برانگیز می دانند. راه حل های بالا بسیاری از این مسائل را حل می کنند و توسعه دهندگان را از انجام کارهای روزمره و خسته کننده نجات می دهند.

شما از کدام اسکریپت آپلود فایل در پروژه های خود استفاده می کنید؟ آیا موارد مورد فوق پاسخگوی نیازهای شما بودند؟ آیا تجربه ساختن یک سیستم آپلود فایل توسط خودتان را دارید؟

در بخش نظرات، پیشنهادات یا تجربیات خود را بیان کنید.