ایجاد: ۱۸:۵۴ ۱۳۹۱/۸/۶
ویرایش: ۲۰:۲۱ ۱۳۹۴/۲/۲۸

یادداشت‌ها

»

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

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 اضافه شده. یک نمونه برنامه خوب نوشته شده بر مبنای این قابلیت جدید از اینجا قابل دانلود است. همچنین امکان انتخاب چندتایی فایل و امکان کنسل کردن یک آپلود خاص را هم داراست.
جهت آشنایی بیشتر با این ویژگی جدید، می‌توانید دو مطلب آموزشی زیر را نیز ببینید: اما روش دوم؛ نصب بودن فلش و جاوا در دستگاه کاربر نیاز است که معمولا یا نصب نیست یا به خاطر آپدیت نبودن، غیرفعال شده (هرچند فلش در حال منسوخ شدن است) اما HTML5 هم‌اکنون در بخش وسیعی از براوزرهای کاربران (بالای 90%) وجود دارد و می‌توانید از آن استفاده کنید. در اغلب پلاگین‌های جاوا اسکریپتی جدیدی که در همین صفحه معرفی کردیم، درصد آپلود با کمک قابلیت‌های html5 نمایش داده می‌شود.
یادداشت‌های مرتبط
  1. کشیدن و انداختن (رها کردن)
  2. سرویس های آنلاین رایگان برای نوشتن، تست و بهینه سازی کدهای برنامه نویسی
  3. برنامه‌های تحت وب آفلاین، چرا و چگونه؟
  4. نمودارها در صفحات وب
  5. نقشه Google در سایت شما
  6. ابرکوکی و ذخیره‌ساز جدید HTML5
  7. انیمیشن با CSS
  8. تشخیص و کشف نوع، نام و مشخصات مرورگر کاربران سایت
  9. پلاگین هایی برای کار با فرم های ورود اطلاعات
  10. کار با قابلیت Page Visibility و کاربردهای آن
  11. قلمرو متغیرها در پی‌اچ‌پی و جاوا اسکریپت
  12. اعتبارسنجی و شکل‌دهی فرم‌ها با استفاده از html5
  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 با پی اچ پی و جاوا اسکریپت

مدیریت

نام وسیله

اعتبار ورود

نام کاربری

رمز عبور

رمز یکبارمصرف

... لیست تمام یادداشت‌ها

تبلیغات

ربات‌های تلگرامی:
مجموعه ربات‌های تلگرامی ما برای ساده‌تر کردن کار با تلگرام و مدیریت کانال و ...
خرید هاست (فضا):
دنبال یک هاست به صرفه برای شروع کار می‌گردید؟
مشخصات و قیمت‌های این مورد رو ببینید. من سال‌ها مشتری‌شون بودم و پشتیبانی‌شون هم خوب بود.
دامنه‌های فروشی:
دامنه‌های زیر مربوط به ما یا مشتریان ماست که قابل فروش هستند. در صورت تمایل به خرید یکی از آنها، مبلغ پیشنهادی را از طریق فرم ارتباطی برای ما ارسال نمایید.

دامنه‌هایی که می‌تواند مصرف مذهبی داشته باشد:
دامنه‌هایی که می‌تواند مصرف تخصصی داشته باشد:
دامنه‌هایی که می‌تواند مصرف شخصی/عمومی داشته باشد: