آپلود یکباره تمامی محتویات دایرکتوری با webkitdirectory

در این مطلب کار با ویژگی webkitdirectory که برای آپلود یکباره تمامی محتویات دایرکتوری مورد نظر است، آموزش داده می شود.

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

همونطور که میدونین میشه کاری کرد که کاربران تک تک فایلهاشون رو بفرستن و یا اینکه چند فایل رو بصورت همزمان انتخاب کرده و بفرستند. فرض کنید بخواید کاری کنید که کاربران بجای انتخاب کردن یک فایل، یک پوشه رو انتخاب کنند و بفرستن. با استفاده از ویژگی webkitdirectory میتونین این قابلیت رو به کاربران بدید که یک پوشه رو انتخاب کرده و تمامی فایلها و زیرپوشه های اون بصورت همزمان به سمت سرور آپلود شده و ارسال گردند.

پس مثلا اگر یک پوشه شامل 3 فایل و 2 پوشه دیگر باشد و هر کدام از اون پوشه ها نیز شامل 10 فایل باشند، کاربر با انتخاب پوشه میتونه به یکباره همه اونا که شامل 23 فایل هستند رو به سمت سرور ارسال کنه.

برای اینکار ما باید برای المنت input با نوع file یک ویژگی غیراستاندارد شده بنام webkitdirectory رو اضافه کنیم و به مرورگر بفهمونیم که ما میخوایم پوشه رو انتخاب و ارسال کنیم.

پشتیبانی مرورگرها

به دلیل اینکه این ویژگی غیراستاندارد شده می باشد، همه مرورگرها از اون پشتیبانی نمیکنن.

پشتیبانی از این ویژگی بصورت زیر می باشد:

همونطور که میبینید مرورگرهای Edge و Firefox و Chrome و Opera از این ویژگی پشتیبانی میکنن و با استاندارد شدن این ویژگی در آینده نزدیک، پشتیبانی اون بیشتر شده و همه مرورگرها از اون پشتیبانی خواهند کرد. زمانی که این ویژگی بصورت استاندارد شده در بیاد، بجای استفاده از webkitdirectory باید از directory استفاده کنید.

دمو

دموی زیر رو در نظر بگیرید: همونطور که میبینید یک انتخاب کننده وجود داره که با استفاده از اون میتونین دایرکتوری مورد نظرتون رو انتخاب و تمامی فایلهای موجود در اون رو آپلود کنید.

میبینید که به یکباره همه فایلهای موجود در پوشه مورد نظر آپلود شده و میتونیم به آدرس نسبی اونا دسترسی داشته باشیم.

جای نگرانی برای پشتیبانی نکردن همه مرورگرها وجود نداره. هر مرورگری که این ویژگی رو پشتیبانی نکنه، از این ویژگی صرف نظر میکنه و مثل این میمونه که اصلا وجود نداره و کاربر میتونه بصورت عادی فایلهای مورد نظر خودش رو انتخاب و آپلود کنه.

نحوه استفاده از webkitdirectory

کد زیر رو در نظر بگیرید:

همونطور که میبینید یک المنت input قرار گرفته و نوع اون file می باشد. id برابر با picker رو برای اون در نظر گرفتیم تا در Javascript به اون دسترسی داشته باشیم. ویژگی webkitdirectory رو به این المنت اضافه کردیم. همچنین ویژگی multiple رو اضافه کردیم تا در مرورگرهایی که از این ویژگی پشتیبانی نمیکنن، کاربران بتونن فایلها رو بصورت چنتایی انتخاب کرده و ارسال نمایند.

حالا میتونیم سمت سرور به این فایلها دسترسی داشته باشیم.

ما در اینجا با استفاده از Javascript میخوایم به فایلها دسترسی داشته باشیم. بصورت زیر عمل میکنیم:

همونطور که میبینید در ابتدا به المنت مورد نظر دسترسی پیدا کرده و اون رو در متغیر picker قرار دادیم. متغیر listing هم مربوط به المنتی هست که میخوایم آدرس نسبی فایلهای آپلود شده رو در اون قرار بدیم.

همونطور که میبینید در خط 4 یک Event listener برای رویداد change مربوط به المنت picker در نظر گرفتیم و یک callback رو قرار دادیم و این callback زمانی که این رویداد رخ بده، اجرا میشه. رویداد change زمانی رخ میده که کاربر پوشه مورد نظر رو انتخاب بکنه.

زمانی که رویداد change رخ میده و تابع callback اجرا میشه، یک حلقه for..of بر روی همه فایلهای آپلود شده اجرا میشه و در هر حلقه به ویژگی webkitRelativePath دسترسی پیدا کردیم.

این ویژگی آدرس نسبی فایل آپلود شده نسبت به دایرکتوری رو مشخص میکنه. در نهایت همه این ویژگی ها رو بصورت یک لیست در المنت مورد نظر قرار دادیم.

برای مطالعه بیشتر میتونین این لینک رو مشاهده کنید.

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

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

یا علی

Source

directory folder HTML‏ javascript upload webkitdirectory آپلود