آپلود همزمان به همراه پیش نمایش قبل از آپلود

قبل از معرفی HTML 5 امکان آپلود همزمان چند فایل تنها با تعیین حداکثر تعداد فایلهای قابل آپلود و قرار دادن تگهای input از نوع file به تعداد آنها در فرم امکانپذیر بود. همچنین اکثر سایتها نیاز به قرار دادن قیدهایی در رابطه با حجم فایلهای قابل آپلود دارند. که قبلا لازم بود این فایلها به سرور آپلود شوند و در سرور حجم آنها مورد بررسی قرار بگیرد.

مقالات مرتبط

قبل از معرفی HTML 5 امکان آپلود همزمان چند فایل تنها با تعیین حداکثر تعداد فایلهای قابل آپلود و قرار دادن تگهای input از نوع file به تعداد آنها در فرم امکانپذیر بود. همچنین اکثر سایتها نیاز به قرار دادن قیدهایی در رابطه با حجم فایلهای قابل آپلود دارند. که قبلا لازم بود این فایلها به سرور آپلود شوند و در سرور حجم آنها مورد بررسی قرار بگیرد.

با معرفی HTML 5 برخی از چالشها در زمینه آپلود فایل مرتفع شده اند که از جمله آنها میتوان به امکان آپلود چند فایل به صورت همزمان و بررسی حجم آنها با استفاده از javascript قبل از آپلود آنها و همچنین پیش نمایش آنها قبل از آپلود اشاره کرد. که از دلایل اصلی اضافه شدن این قابلیت ها به HTML 5 میتوان به صرفه جویی در استفاده از منابع سرور و پهنای باند و همچنین راحتی برنامه نویس اشاره کرد.

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

ارسال چند فایل به صورت همزمان

برای فعال سازی multiple upload کافی است از خصیصه multiple بر روی تگ input از نوع file استفاده کنیم. که این خصیصه در HTML 5 به فریم ورک اضافه شده است.

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

در سمت سرور برای دریافت عکسهای آپلود شده به صورت ذیل عمل میکنیم:

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

برای دسترسی به فایلهای انتخاب شده توسط کاربر و پیشنمایش آنها باید از آرگومان event تگ input که توسط فریم ورک HTML 5 در اختیار ما قرار میگیرد استفاده کنیم. در نمونه کد زیر با هندل کردن رویداد change تگ input از نوع فایل تصاویر پیشنمایش داده خواهند شد و همچنین اطلاعات مربوط به حجم آنها نمایش داده میشوند.

در زیر میتوانید نمونه عملی را آزمایش کنید. نام فایل و حجم آن به صورت tooltip نمایش داده میشود.