شقایق اشتری شقایق اشتری
آموزش Backload (آپلود چندین فایل به طور همزمان با آجاکس )
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: چهار دقیقه
یک پروژه‌ی جدید Asp.net MVC ایجاد کنید و .Net Framework آن را 4.5 و یا بالاتر انتخاب کنید. دلیل اینکار را در ادامه‌ی آموزش به شما توضیح خواهم داد.
برای شروع کار با Backload ابتدا به قسمت Nutget می‌رویم که در مسیر زیر است :
Tools/Library Package Manager/Manage Nutget Packages For Solution
در پنجره‌ی باز شده از کادر سمت چپ، بر روی قسمت Online کلیک می‌کنیم و سپس در کادر Search در گوشه‌ی بالا سمت راست، کلمه‌ی Backload را تایپ می‌کنیم در نتایج Search دو مورد زیر را Install می‌کنید :

JQuery File Upload Plugin  *

Backload. A Proffesional Full Featured Asp.Net FileUpload Controller  *

پس از نصب دو مورد بالا ، موارد زیر را که در دو عکس پایین می‌بینید، به پروژه‌ی شما اضافه خواهند شد:















تا اینجا ما ابزار Backload را بر روی پروژه‌ی خود نصب کردیم. همانطور که می‌بینید Backload یک Demo به پروژه اضافه کرده که شامل View ، Controller و ... می‌باشد. اکنون پروژه را اجرا کنید و با FileUpload کار کنید. البته توجه داشته باشید که  url صفحه‌ای که FileUpload در آن قرار دارد به این صورت است : localhost:PortNumber/BackloadDemo/Index

*نکاتی که باید بدانید:

عکس هایی که شما آپلود می‌کنید در پوشه‌ی Files موجود در ریشه‌ی پروژه‌ی شما قرار می‌گیرند این پوشه بوسیله‌ی خود ابزار Backload ساخته می‌شود.
چنانچه بخواهید در پوشه‌ی Files پوشه‌ای ایجاد کنید، ابتدا View آن‌را باز کنید. این View در پروژه، در مسیر Views/ BackloadDemo/Index قرار دارد .
در داخل تگ form یک Hidden Field با نام objectContext اضافه می‌کنید. Value ایی که شما به این Hidden Field نسبت می‌دهید، نام پوشه‌ی شما در پوشه‌ی Files خواهد بود. مانند تصویر زیر: در اینجا پوشه‌ای با نام 2014-02 در پوشه‌ی Files وقتی که فایلی را باFile Upload آپلود می‌کنیم، ایجاد می‌شود.

چنانچه بخواهید در پوشه‌ای که خودتان ایجاد کردید (که در این مثال 2014-02 می‌باشد) پوشه‌های متعدد دیگری هم داشته باشید Hidden Field ای با نام uploadContext ایجاد می‌کنید؛ مانند تصویر زیر :


اکنون اگر فایل جدیدی را آپلود کنید در مسیر 

ذخیره می‌شود . یعنی بین نام هر پوشه از سمی کولن ; در Value استفاده می‌کنید.

تا اینجا ما می‌توانیم بوسیله‌ی ابزار Backload عکس‌ها را آپلود ، حذف و مسیر آپلود عکس‌ها را تغییر دهیم.
اگر توجه کرده باشید دفعات بعد که پروژه را اجرا می‌کنید عکس‌های موجود در پوشه، در گرید ویو File Upload به شما نمایش داده خواهد شد. حال اگر بخوایم عکس‌های موجود در پوشه‌ی دیگری را نمایش دهیم باید چه کار کنیم؟!
گاهی اوقات نیاز داریم که محتویات پوشه‌ای خاص را در گرید ویو File Upload مان نمایش دهیم. برای این کار شما باید کنترلر FileUploadController که در فایل ضمیمه در آموزش هست را در پوشه‌ی Controller پروژه‌ی خود کپی کنید .اگر شما این کنترلر را باز کنید مواردی مانند کلمه کلیدی Task و async را مشاهده خواهید کرد. این موارد در .Net Framework 4 شناسایی نمی‌شود. برای همین در ابتدای آموزش تاکید کردم که .Net Framework 4.5 و یا بالاتر را برای پروژه‌ی خود انتخاب کنید .
در تابع Handler_GetFilesRequestStarted در این کنترلر باید مشخص کنید که فایل‌های موجود در کدام مسیر را برای شما نمایش دهد؛ آن هم با استفاده از دستور زیر :

اکنون قبل از آنکه پروژه را اجرا کنید فایل Backload.Demo.js که در مسیر Scripts/Fileupload هست را باز کنید و url موجود در آنرا مانند عکس زیر تغیییر دهید :

حالا پروژه را اجرا کنید. خواهید دید تمامی فایل‌های موجود در مسیری را که شما مشخص کرده‌اید، برایتان نمایش خواهد داد.

چنانچه بخواهید تعداد مثلا 5 فایل برای شما در گرید ویو مربوط به FileUpload نمایش داده شود، به تابع handler_GetFilesRequestFinished می‌روید. متغیر limit مشخص می‌کند که 5 فایل نمایش داده شود. می‌توانید این عدد را به دلخواه خود تغییر دهید.
نکته‌ی بسیار مهم دیگری که باید به آن توجه شود مربوط به Hidden Field نام پوشه‌ها می‌باشد. بار دیگر پروژه را اجرا کنید. با استفاده از ابزاری مثل FireBug کدهای html صفحه‌ی خود را ببینید. Hidden Field ایی با نام objectContext را پیدا کنید و Value آنرا به test تغییر دهید. فایلی را آپلود کنید حالا به پوشه‌ی Files موجود در ریشه‌ی پروژه بروید. می‌بینید که پوشه‌ای با نام testایجاد شده و فایلی هم که آپلود کردید در آن قرار دارد که این یک اشکال است. برای اینکه جلوی این گونه کارها را بگیریم به تابع handler_StoreFileRequestStartedAsync می‌رویم و کد زیر را می‌نویسیم :

دستور e.Context.PipelineControl.ExecutePipeline = false; باعث میشود که اجرای تابع متوقف شود.

فایل ضمیمه :

FileUploadController-462d551688cf48c68cb55343ac5464f3.zip

برای مشاهده مثال‌های دیگری درباره‌ی Backload به این لینک بروید.

موفق باشید.

این نوشتار اولین آموزش من در این سایت می‌باشد و جا دارد از دوست خوبم "محبوبه قربانی" که باعث شد من با MVC آشنا شوم تشکر کنم. 

‫۱۰ سال و ۸ ماه قبل، جمعه ۲۵ بهمن ۱۳۹۲، ساعت ۱۸:۰۵
۳۷۳۱
۵
MVC
مطالب مشابه
  • #
    مهدی سعیدی فر مهدی سعیدی فر
    ‫۱۰ سال و ۸ ماه قبل، جمعه ۲۵ بهمن ۱۳۹۲، ساعت ۱۹:۳۸
    با تشکر از مطلب مفید شما
    این کتابخانه داره از کتابخانه ی  jQuery File Upload  استفاده می‌کنه. به نظرم کسی نحوه‌ی استفاده از این کتاب خانه را با توجه به sample‌های خود سایتش یاد بگیره خیلی بهتره. نسخه‌ی angularjs هم داره.
    • #
      شقایق اشتری شقایق اشتری
      ‫۱۰ سال و ۸ ماه قبل، جمعه ۲۵ بهمن ۱۳۹۲، ساعت ۲۰:۲۰
      ممنونم .
      نوشته‌ی من در حد یک آشنایی و معرفی با این ابزار بود .
      و اینکه بهتره مقاله‌ی بنده را دقیق‌تر بخوانید چون آخر مقاله لینک مثال‌های کار با backload را گذاشتم.
      مورد بعدی اینکه متاسفانه دستوراتی مثل e.param.Searchpath را  در مثال‌های آماده‌ی خود سایت هم  به آن اشاره ای نکرده بود و من خودم فهمیدم که این دستور را باید در کدام تابع  بنویسم تا جواب دهد .
      نکته‌ی بعدی Hidden Field که به عنوان نام پوشه استفاده می‌شود اگر یک کاربر سایت ما مقدار value این hidden field را تغییر دهد اسم پوشه به کل تغییر می‌کند که در مثال‌های آماده‌ی خود سایت هم به این موضوع اشاره ای نکرده بود این راه حل هم خودم فکر کردم و به نتیجه ای رسیدم که در بالا توضیح دادم .
  • #
    شقایق اشتری شقایق اشتری
    ‫۱۰ سال و ۶ ماه قبل، یکشنبه ۲۴ فروردین ۱۳۹۳، ساعت ۱۸:۱۹
    نکته ای بسیار مهم در رابطه با کار با Backload:

    حذف و اضافه کردن تصاویر با Backload روی لوکال بدون هیچ مشکلی انجام می‌شود اما بعد از اینکه شما پروژه را آپلود کردید خواهید دید که تصاویر اضافه می‌شوند اما  حذف نمی‌شوند.
    برای حل این مشکل کد زیر را در تگ <system.webServer>  در فایل web.config قرار دهید :

     <modules runAllManagedModulesForAllRequests="true">
      <remove name="WebDAVModule"/>
  </modules>

    موفق باشید .
  • #
    هومن هومن
    ‫۱۰ سال و ۳ ماه قبل، پنجشنبه ۲۹ خرداد ۱۳۹۳، ساعت ۲۳:۰۵
    از مطلب خوبتون ممنونم.
    یه مشکلی که من بهش بر خوردم این بود که این ابزار در آپلود فایل‌های همنام ما را دوچار مشکل میکنه ، اگر بشود با کمی دستکاری هنگام آپلود ، در صورت همنام بودن یک GUID به نام آن بچسبانیم این مشکل برطرف میشد.
    • #
      شقایق اشتری شقایق اشتری
      ‫۹ سال و ۳ ماه قبل، شنبه ۳۰ خرداد ۱۳۹۴، ساعت ۱۳:۴۷
      چنانچه بخواهید هنگام آپلود فایل‌ها نامشان ر ا به نام دلخواه تغییر دهید در تابع handler_StoreFileRequestStartedAsync
      کد زیر را بکار می‌برید       
      string Filen = e.Param.FileStatusItem.FileName;
int find = Filen.LastIndexOf(".");
e.Param.FileStatusItem.FileName = DateTime.Now.Ticks + "-" + Filen.Substring(0,find-1)+ Filen.Substring(find, Filen.Length - find);
e.Param.FileStatusItem.UpdateStatus(true);