۱۰ افزونه آپلود فایل Ajax در Jquery

پیاده سازی آپلود فایل با روش AJAX امری چالش برانگیز است و این موضوع زمانی سخت تر می شود که بخواهید ویژگی کشیدن و رها کردن(Drag & Drop)، پیش نمایش تصاویر، نوار پیشرفت(Progress Bar) و سایر موارد مربوط و محبوب را نیز پیاده سازی کنید. با ما همراه باشید تا در یک چشم به هم زدن کتابخانه های Jquery که عملیات آپلود فایل به صورت ای جکس و کلی امکانات دیگر را در اختیار شما قرار می دهند، حضورتان معرفی کنیم.

FineUploader

FineUploader یکی از انعطاف پذیرترین و بهترین آپلودرهای تحت وب است که با جاوا اسکریپت خالص نوشته شده اما برای فریمورک جی کوئری نیز افزونه ای ارائه کرده است. در مقایسه با سایر افزونه هایی که در این مقاله حضورتان معرفی می شود، این افزونه از محبوبیت بالا و امکانات منحصربفردی مثل توقف موقت آپلود ها، تکه تکه کردن فایل، آپلود <canvas>، تلاش مجدد، آپلود پوشه، ویرایش نام فایل ها و… برخوردار است.

fineuploader

وب سایت

سورس کد

 

DropZone.js

DropZone.js نیز یک آپلودر خوب و قدرتمند است که در جاوا اسکریپت و Jquery یافت می شود، از جمله آپشن های این آپلودر را می توان پیش نمایش تصاویر، تعیین حداکثر فایل ساز، تغییر نام فایل ها در هنگام آپلود، آپلود همزمان و تغییر رزولوشن تصاویر در هنگام آپلود و امکاناتی دیگر عنوان کرد. این کتابخانه با توجه به محبوبیتی که دارد مستندات خوبی هم در دسترس دارد اما در نظر داشته باشید که ظاهرا در رفع باگ و ارائه آپدیت، طبق گزارشات کاربران، کمی کند است. پس در انتخاب این پلاگین دقت لازم را به عمل آورید.

dropzone

وب سایت

سورس کد

 

Jquery File Upload

همانند افزونه ی DropZone نیز امکانات مشابهی اراه می دهد تا نیازهای شما را برطرف سازد و البته با رابط کاربری متفاوت تری نسبت به دراپ زون، این افزونه قابلیت درهم آمیزی با Jquery UI و Angular JS را نیز داراست و به همین دلیل از محبوبیت بالایی برخوردار است.

jquery file upload

وب سایت

سورس کد

 

Plupload

افزونه Plupload می تواند یک انتخاب خوب برای کسانی باشد که قصد دارند از UI های گوناگون استفاده کنند، این افزونه قالب های بسیاری دارد که احتمالا می تواند با سلیقه شما جور در بیاید.

plupload

وب سایت

سورس کد

 

Formstone Upload

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

formstone

وب سایت

سورس کد

 

Jquery.filer

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

jquery filer

وب سایت

سورس کد

 

Bootstrap File Input

Bootstrap File Input همانطور که از نامش پیداست یک افزونه ی سازگار با بوت استرپ ۳ به بالا و تحت کتابخانه ی Jquery است که نیازهای شما را برطرف می کند و امکان شخصی سازی نیز به شما می دهد. یکی از ویژگی های جالب این افزونه این است که نه تنها به شما امکان پیش نمایش تصاویر را می دهد بلکه امکان ارائه پیش نمایش متون، HTML، ویدئو، صوت و آبجکت های فلش را نیز دارا می باشد.

boostrap file input

وب سایت

سورس کد

 

Jquery Upload File

افزونه Jquery Upload File یک ابزار ساده برای آپلود فایل در جی کوئری است که امکانات پایه و پیشرفته ای را در اختیار شما قرار می دهد. امکان پیش نمایش تصاویر، ترجمه و محلی سازی و ساخت قالب های سفارشی را نیز داراست و برای هر کدام از امکاناتش یک مثال کاربردی نیز دارد.

jquery upload file

وب سایت

سورس کد

 

Jquery HTML5 Uploader

این پلاگین به شما امکان Drag & Drop فایل درون یک المنت مثل <div> را می دهد و قادر است فایل را به صورت Ajax به URL ایی که از قبل مشخص کرده اید ارسال کند. نه کمتر و نه بیشتر!

jquery html5 uploader

وب سایت

سورس کد

 

Uploadify

Uploadify بر مبنای فلش و تحت Jquery کار می کند که یک دکمه ی Select به وب سایت شما اضافه می کند. امکانات شخصی سازی محدودی دارد، پشتیبانی آن بسته شده و تکنولوژی فلش در حال حاضر به صورت عام مورد استفاده قرار نمی گیرد. استفاده از این افزونه پیشنهاد نمی شود و پلاگین دیگری به نام UploadiFive وجود دارد که بر اساس HTML5 کار می کند اما لایسنس تجاری آن حدودا ۱۰۰دلار است که با توجه به گزینه های پر امکانات و رایگان معرفی شده در این مقاله، به صرفه نیست.

uploadify

uploadify

وب سایت

سورس کد

 

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

Resumable.js

FileApi.js

 

 

اشتراك گذاری نوشته

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *