ترفندهای پیشرفته jQuery (قسمت 56)

- visibility ٠ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع پنجم : استفاده از پلاگینها

ترفند 95 : مدیریت Drag & Drop فایلها در مرورگر

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

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

در فدم اول باید این ابزار رو include کنید:

بعد از اون شما میتونین یک div قرار بدین که تصویری که به مرورگر فرستاده میشه درون اون نمایش داده بشه.

حالا میتونیم با استفاده از این ابزار تنظیمات مورد نظرمون رو انجام بدیم.

در ابتدا div مورد نظر رو در یک متغیر قرار میدیم:

حالا برای body این ابزار رو اعمال میکنیم:

حالا باید تنظیمات مورد نظرمون رو قرار بدیم:

همونطور که میبینید برای beforestart یک تابع رو قرار دادیم که فقط فایلهای از نوع تصویر رو قبول میکنه و اجازه نمایش میده. همونطور که میبینید از یک عبارت منظم ( Regex ) برای اینکار استفاده شده. اگر درون file.type کلمه image وجود داشته باشه متوجه میشیم که تصویر هست و true برگرشت داده میشه و این فایل اجازه ورود داره.

میبینید که یک متد load هم اضافه کردیم. درون اون در ابتدا یک تگ img میسازیم. بعد از load شدن img براش max-width و max-height مشخص میکنیم و در نهایت هم اونو به div اضافه میکنیم. در آخر هم بعنوان src اون تگ img ، آدرس اون عکسی که در مرورگر رها شده رو قرار میدیم.

این ابزار متدهای دیگه ای هم داره که میتونین از اونا استفاده کنید:

  • progress
  • abort
  • error
  • loadend
  • FileReader
  • skip
  • groupstart
  • groupend

خروجی بصورت زیر خواهد بود:بهمثقثشیثق

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.