یادداشت‌ها

»

روش های بهبود کیفیت آپلود فایل ها از طریق فرم های صفحات وب

File API یکی از قابلیت‌های جدید HTML5 است که قبل از آپلود، امکان دسترسی به محتویات فایل و ... را به برنامه‌نویس می‌دهد. (آشنایی بیشتر با کدنویسی این موضوع)
همچنین با کمک canvas در HTML5 می‌توان قبل از آپلود تصویر، سایز آن را تغییر داد یا آن را بُرش زد (resize and crop) که در این مطلب به خوبی تشریح شده است.
بر اساس 2 نکته فوق، اسکریپت‌هایی تهیه شده که دست برنامه‌نویس را برای کار با فایل آپلودی قبل از آپلود بسیار بازتر کرده است که در این مطلب چند نمونه از این کدها معرفی شده است.

1. dropzone.js
   پلاگینی برای ایجاد فضایی که کاربر بتواند فایل را کشیده و در آنجا رها کند به همراه نمایش سایز عکس و تصویر کوچک آن.
   این پلاگین توسط آقای انصاری کمی بهبود یافته است.
2. Fine Uploader
   یک آپلودر عالی که جدیدا معرفی شده و گستره زیادی از براوزرها را پشتیبانی می‌کند. این آپلودر دارای progressbar و ... نیز هست. این پلاگین که شعار «پیشرفته‌ترین آپلودر در عین ساده بودن» را یدک می‌کشد، به صورت رایگان از مخزن گیت‌هاب آن قابل دانلود است.
3. Plupload
   یکی از قوی‌ترین آپلودرها که توسط تیم توسعه‌دهنده TinyMCE ایجاد شده اما در هر پروژه‌ای قابل استفاده است.
   این آپلودر از تکنیک‌های مختلفی که در براوزر کاربر قابل دسترس باشند (فلش، html5، silver light و ...) استفاده می‌کند تا بتواند پرقابلیت‌ترین آپلودر را برای شما فراهم کنید.
4. Resumable.js
   فرم آپلود همواره چالش‌ها و مخاطراتی برای برنامه نویس دارد (امنیتی، بزرگی فایل و ...) که کتابخانه Resumable.js به مشکل بزرگی فایل یا ناپایداری کانکشن کاربر پرداخته و این امکان را فراهم می‌کند که آپلود، قابل Resume باشد. این اسکریپت یک فایل بزرگ را به chunk های کوچک تقسیم می‌کند و علاوه بر اینکه امکان pause را برای کاربر آپلود کننده فراهم می‌کند، در صورتی که اینترنت کاربر قطع شود، پس از اتصال مجدد، ادامه فایل آپلود می‌شود نه اینکه از آپلود از 0 شروع شود. کار با این اسکریپت راحت بوده و تنظیمات دلخواه زیادی برای تطبیق بیشتر بر پروژه شما داراست.
5. jQuery Upload File
   این آپلودر نیز به عنوان یکی از پلاگین‌های جی‌کوئری نوشته شده و بسیار زیبا و خوش‌دست است و امکان آپلود همزمان چند فایل به همراه نوار درصد آپلود و همچنین امکان کنسل کردن آپلود را فراهم کرده است. پیش نمایش این آپلودر به همراه تنظیمات سمت کاربر و سرور آن نیز به سادگی ارائه شده است.
6. jQuery Upload File
   این مورد نیز هرچند هم‌نام مورد قبلی است اما بسیار پرطرفدارتر و قدرتمندتر است و علاوه بر قابلیت‌های آن، امکان Cancel یک مورد و همچنین Resume کردن یک آپلود کنسل شده را نیز داراست. تقسیم فایل بزرگ به قطعات کوچک برای تسهیل آپلود، ریسایز کردن تصویر در سمت کلاینت و پیش‌نمایش تصویر و ویدئو از دیگر قابلیت‌های آن است. این پلاگین نمونه کدهایی به زبان‌های PHP, Python, Ruby on Rails, Java, Node.js, Go را نیز برای کار با آن فراهم کرده است.
7. FileAPI
   نمره 20 برای این کتابخانه کم است!
   همانطور که می‌دانید، در html5 این امکان فراهم شده است که قبل از آپلود، javascript می‌تواند محتویات فایل را بخواند. با کمک ابزارهای خوب جاوا اسکریپتی FileAPI می‌توانید محتویات یک فایل انتخاب شده یا دراپ شده را بخوانید (به صورت باینری، متنی و data uri) و در صورتی که فایل انتخاب شده، یک تصویر است، می‌توانید آن را بُرش بزنید (crop) یا ابعاد آن را تغییر دهید (resize) و بچرخانید (rotate) و واترمارک بزنید و ...
   نهایتا قبل از آپلود نیز می‌توانید تنظیماتی انجام دهید و درصد آپلود شده را کنترل کنید و ...
   همچنین در صورت وجود دسترسی به وبکم (با فلش و ...) کاربر می‌تواند از وب‌کم عکس بگیرد، ویرایش کند و سپس آپلود کند.
   جالب اینجاست که یک نمونه کد PHP برای دریافت فایل و مشخصاتش در سمت سرور نیز در کدهای آن ارائه شده است.
   خلاصه آنکه با امکاناتی که برای برنامه‌نویس فراهم می‌کند، می‌تواند آپلود را برای کاربر استفاده‌کننده بسیار شیرین کند.
8. همانطور که در مورد قبل گفته شد، در html5 دیتای ورودی فایل input[type=file] به صورت باینری و ... قابل دسترس است. همچنین همانطور که در مطلب رمزنگاری گفته شد، به کمک js می‌توان یک دیتا را رمزگذاری کرد. با توجه به این دو نکته، می‌توان دیتای یک ورودی فایل (input:file) را نیز رمزگذاری کرد تا انتقال فایل به سرور به صورت مخفیانه انجام شود. یک نمونه عملی این کار در این مطلب به همراه کد و توضیحات و مثال آورده شده است.
9. jquery file-api
   یک پلاگین که بر اساس پلاگین‌های قبلی (خصوصا fileAPI و jCrop) توسعه یافته و امکانات خوبی دارد. علاوه بر آپلود یک و چندگانه و نمایش درصد آپلود و ...، امکان برش عکس قبل از آپلود را نیز داراست.
10. picEdit
    این افزونه عالی، برای تغییر سایز، بُرش و ... روی تصویر قبل از آپلود کاربرد دارد و منبع ورودی تصویر نیز هممی‌تواند فایل انتخابی کاربر باشد و هم تصویر گرفته شده از وبکم/دوربین جلوی وسیله کاربر.
    چرا که در html5 امکان دسترسی به سخت‌افزار، به صورت وسیعی گسترش یافته است.
11. zip.js
    با کمک این پلاگین می‌توانید به سادگی بدون اتصال به سرور، در سمت کلاینت فایل zip بسازید. از محتویات دلخواه یا از مجموع فایل‌های انتخاب شده توسط کاربر.
    این پلاگین همچنین می‌تواند فایل zip (که توسط کاربر انتخاب شده) را نیز باز کند و به نام فایل‌ها و محتویات آن قبل از آپلود، دسترسی داشته باشید.
12. flow.js
    یک آپلودر خوب اما ساده مشابه سایر آپلودرهای مرغوب متداول با این امتیاز که یک ورژن مخصوص AngularJS با نام ng-flow نیز دارد.

نمایش درصد آپلود

برای این کار 2 روش کلی وجود دارد:

1. استفاده از روش‌های سمت سرور
   نصب افزونه‌های خاص (مثل APC) در سرور (مثل این و این)
2. با استفاده از کلاینت
   استفاده قابلیت‌های HTML5 یا فلش یا جاوا که روی کامپیوتر کاربر موجود است

روش اول برای اغلب کاربران (که هاست اشتراکی دارند) میسر نیست. اما خوشبختانه اگر بر روی سرور، نسخه جدید PHP نصب شده باشد (نسخه 5.4 و بالاتر) آنگاه می‌توان از قابلیت جدیدی که در خود PHP وجود دارد، برای رهگیری میزان آپلود استفاده کنید.
همانطور که در لینک بالا می‌بینید، track the upload progress of files جزو قابلیت‌های کلیدی هست که در نسخه 5.4 اضافه شده. یک نمونه برنامه خوب نوشته شده بر مبنای این قابلیت جدید از اینجا قابل دانلود است. همچنین امکان انتخاب چندتایی فایل و امکان کنسل کردن یک آپلود خاص را هم داراست.
جهت آشنایی بیشتر با این ویژگی جدید، می‌توانید دو مطلب آموزشی زیر را نیز ببینید:

• File Upload Progress in PHP 5.4
• PHP 5.4 File Upload Progress and HTML5 Progress Bars

اما روش دوم؛ نصب بودن فلش و جاوا در دستگاه کاربر نیاز است که معمولا یا نصب نیست یا به خاطر آپدیت نبودن، غیرفعال شده (هرچند فلش در حال منسوخ شدن است) اما HTML5 هم‌اکنون در بخش وسیعی از براوزرهای کاربران (بالای 90%) وجود دارد و می‌توانید از آن استفاده کنید. در اغلب پلاگین‌های جاوا اسکریپتی جدیدی که در همین صفحه معرفی کردیم، درصد آپلود با کمک قابلیت‌های html5 نمایش داده می‌شود.

---

یادداشت‌های مرتبط

1. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
2. برنامه های تحت وب آفلاین، چرا و چگونه؟
3. نمودارها در صفحات وب
4. نقشه Google در سایت شما
5. ابرکوکی و ذخیره ساز جدید HTML5
6. انیمیشن با CSS
7. تشخیص و کشف نوع، نام و مشخصات مرورگر کاربران سایت
8. پلاگین هایی برای کار با فرم های ورود اطلاعات
9. کار با قابلیت Page Visibility و کاربردهای آن
10. قلمرو متغیرها در پی اچ پی و جاوا اسکریپت
11. اعتبارسنجی و شکل دهی فرم ها با استفاده از html5
12. کشیدن و انداختن (رها کردن)
13. دسترسی کامل به عناصر آدرس در جاوا اسکریپت
14. ادیتورهای محتوای غنی شده برای صفحات وب
15. html نسخه 5
16. پخش کننده های فایل صوتی تصویری در صفحات وب
17. برنامه نویسی اندروید
18. درباره نود جی اس
19. افکت های متن با جاوا اسکریپت و جی کوئری
20. ارتفاع اتوماتیک ورودی متن جهت حذف اسکرول
21. خطا در جاوا اسکریپت
22. پایگاه داده در جاوا اسکریپت
23. روش ها و تکنیک های پنهان کردن ایمیل
24. زوم (zoom) و بزرگنمایی تصویر و متن با جاوا اسکریپت و پی اچ پی
25. کشف فونت های نصب شده در کلاینت
26. بازی با زمان!
27. کار با تصاویر در سمت کاربر
28. بهینه سازی آنلاین سی اس اس و جاوا اسکریپت
29. استفاده از Media Queries ها و اصلاح عدم پشتیبانی IE6-8
30. معرفی چند سایت جهت آپلود رایگان فایل ها
31. چند لینک جامع برای یادگیری جاوا اسکریپت
32. انواع راه های تولید کد QR با پی اچ پی و جاوا اسکریپت
33. نمونه کارهایی با اچ تی ام ال پنچ