illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

0 298 ۱۸ آذر ۹۴

در این قسمت با ادامه ترفندهای پیشرفته 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram