Using FormData to Upload Files With JQuery and MVC

بالأمس جائتنى إستشارة عن كيفية إستخدام
FormData
فى رفع مجموعة من الصور من خلال
JQuery
مع تحديد اسم الفولدر مع كل صورة ليتم حفظ الصورة داخل الفولدر المحدد معها.

فقمت بتطبيق مثال مبسط, وأحببت أن أعرضه عليكم فقد يكون فيه فائدة.

الخطوة الأولى :-

هذة هو الشكل المبدئي للمثال الذى سنقوم بالتطبيق عليه , وبه إثنان من أداة تحميل الصور :-

1.png

ونلاحظ أننا هنا قمنا بتحديد اسم الفولدر عن طريق استخدام
data-folder custom attribute
كان يمكن أن نستبدلها بـ
Select Or Input Element

الخطوة الثانية :-

إنشاء class سيقوم بتمثيل الصورة الواحدة القادمة من المتصفح من العميل :-

4.PNG

وهنا قمنا بإنشاء Controller وبه Method واحدة باسم Up وتستقبل مجموعة من الـ FileData المعرفة بالاعلى , وداخل هذة الـ Method نصل إلى اسم الفولدر ونقوم بتحديد المسار ومن ثم نقوم بالحفظ .

3.PNG

الخطوة الثالثة :-
تجميع الصور من الصفحة وإرسالها إلى السيرفر لحفظها

2.PNG

ونلاحظ أيضاً أنه تم إهمال معالجة الأخطاء وأمور التحقق من صحة المدخلات
Validation
وذلك لغرض التبسيط , فإن أردت أن تستخدم المثال, عليك بالعمل أكثر عليه ليناسب احتياجاتك .

وللعلم يمكن العمل مع Web API
وسيفيدك هذا المثال فى التطبيق مع
Web API

https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

فى الختام بالتوفيق للجميع, وأهلاً باسئلتكم وإستشاراتكم

Advertisements

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار وردبرس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s