ورود

View Full Version : سوال: آپلود تصویر بصورت ایجکسی - نمایش نوار پیشرفت آپلود و چند سوال مرتبط



alibahman47
دوشنبه 06 شهریور 1396, 23:24 عصر
درود

توضیح :
من برای بخش اضافه کردن محصول به فروشگاه از یک تصویر Index برای نمایش در صفحه اول و هشت تصویر برای گالری استفاده میکنم

http://s9.picofile.com/file/8304891642/Gallery.jpg

که کاربر در صفحه اضافه کردن محصول جدید تمام مشخصات و این تصاویر را انتخاب میکند و در زمان پست شدن به سمت کنترولر در رویداد [HttpPost] دستورات اضافه کردن مشخصات محصول و بعد ذخیره کردن عکس ها انجام میگیره و در صورت مموفقیت آمیز بودن پیغام مناسب نمایش می یابد.


این رو هم بگم که کل موراد پست شدن سمت کنترولر و برگشت پیغام ها بصورت Ajax انجام میشه !

مشکل :
برای زمانی که پروژه روی هاست بره آپلود کردن این 9 تا عکس ( عکس های گالری حداکثر ممکنه تا 3 مگابایت باشن) خیلی خیلی زمان میبره و کاربرمدیر مدت زیادی رو باید منتظر بمونه تا کل این فایل ها آپلود بشن بعد پیغام موفقیت نمایش میابد و اگه زمان انتظار زیاد باشه ممکنه فکر کنه که اصلا کاری صورت نگرفته !


را ه حل من :
برای این مشکل من بنظرم باید همون زمان که عکس رو از تو کامپیوتر انتخاب میکنه و بعد پیشنمایشش نشون داده میشه یه گزینه Upload براش بزارم که همون موقع فایل رو آپلود کنه .
و میخوام برای هر کدوم از تصاویر یک Ajax.form بزارم که بازدن دکمه Uplad به سمت کنترولر بره و عکس رو آپلود کنه .



سوالات ؟
1 - بنظرتون این شیوه کار صحیحه ؟ یا لطفا شیوه بهتر رو پیشنهاد بدید ؟

2 - برای آپلود فایل من از یک Html.Helper که بصورت دستی نوشته شده استفاده میکنم :


که متاسفانه در سمت سرور وقتی میخوام خالی یا پر بودنش رو چک کنم حتی موقعی که یک عکس انتخاب شده دستور If که خالی بودن رو چک میکنه اجرا میشه و پیغام نمایش پیدا میکنه :
http://s8.picofile.com/file/8304891692/Upload2.jpg
http://s9.picofile.com/file/8304891668/Upload1.jpg
البته ذخیره شدن و همه چیز درست انجام میشه , فقط شرطی که گذاشتم اگه UploadGalleryImage1 == null بود اشتباهی اجرا میشه و پیغام رو نمایش میده.

اگه Html.Helper یا مورد بهتری رو برای آپلود کردن عکس سراغ دارید لطفا معرفی کنید ؟


3 - چطوری زمانی که عکس در حال آپلود شدنه نوار پیشرفت اون رو نشون بدم - که کاربر بفهمه عکس در حال آپلود شدنه ؟
اگر sample ی برای Asp.net Mvc5 مثل این نمونه (http://blueimp.github.io/jQuery-File-Upload/) سراغ دارید لطفا معرفی کنید - اگه کد های سمت سرور (asp.net mvc) هم نوشته شده باشه خیلی هم بهتر.


مدیر های گرامی خیلی ببخشید زیاد نوشتم , امیدوارم منظورم رو رسونده باشم , عجله ای ندارم ,هر وقت فرصت کردید پاسخ رو بدید.

مهدی کرامتی
سه شنبه 07 شهریور 1396, 22:23 عصر
اگر از Kendo Upload استفاده کنی خودش امکان آپلود به صورت Ajax و با امکان نمایش درصد پیشرفت آپلود داره.

alibahman47
پنج شنبه 09 شهریور 1396, 10:36 صبح
به چه شکل میشه آخرین ورژن Kendo Ui رو به پروژه اضافه کرد .

یک نمونه از Kendo Ui رو میتونید معرفی کنید ؟

موردی که بشه چند فایل عکس رو در سمت کاربر انتخاب کرد و به سمت سرور انتقال داد؟ و اینکه در روش Kendo Ui چطوری در سمت کنترولر میشه عکس ها دریافت کرد ؟

Moien Tajik
پنج شنبه 09 شهریور 1396, 11:14 صبح
http://barnamenevis.org/showthread.php?541411-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-Progress-Bar&p=2374659&viewfull=1#post2374659

alibahman47
سه شنبه 14 شهریور 1396, 09:49 صبح
http://barnamenevis.org/showthread.php?541411-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-Progress-Bar&p=2374659&viewfull=1#post2374659

ممنون آقای تاجیک , برای ارسال فایل از طریق Ajax و با استفاده از formdata به سمت کنترولر و برگشت مقدار بصورت جیسون Sample یا مخزن سراغ دارید ؟

alibahman47
سه شنبه 14 شهریور 1396, 10:02 صبح
http://barnamenevis.org/showthread.php?541411-%D9%BE%DB%8C%D8%A7%D8%AF%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%A2%D9%BE%D9%84%D9%88%D8%AF-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-Progress-Bar&p=2374659&viewfull=1#post2374659

ممنون آقای تاجیک , برای ارسال فایل از طریق formdata به سمت کنترولر و برگشت مقدار بصورت جیسون Sample یا مخزن سراغ دارید ؟

میخوام یک تصویر که از طریق یک file Upload توسط کاربر انتخاب میشه و تعداد پارامتر دیگه رو به سمت کنترولر بفرستم و در برگشت از یک مقدار Json سه قسمتی رو به سمت View و Ajax برگشت بدم .

Moien Tajik
سه شنبه 14 شهریور 1396, 14:37 عصر
در success میتونید response دریافتی از اکشن رو بگیرید ، چک کنید :
https://cmatskas.com/upload-files-in-asp-net-mvc-with-javascript-and-c/
https://forums.asp.net/t/2068516.aspx

alibahman47
چهارشنبه 15 شهریور 1396, 12:16 عصر
در success میتونید response دریافتی از اکشن رو بگیرید ، چک کنید :
https://cmatskas.com/upload-files-in-asp-net-mvc-with-javascript-and-c/
https://forums.asp.net/t/2068516.aspx

متاسفانه هر کدوم از کدها رو تست میکنم اصلا جواب نمیده ,
کد جی کوری رو طوری نوشتم که با کلیک روی یک دکمه کدها اجرا شوند ولی متاسفانه هیچ ارسالی به سمت کنترولر انجام نمیشه .

Sample یا مخزن آماده برای این مورد سراغ ندارید , یک مورد ساده هم باشه کافیه .

Moien Tajik
چهارشنبه 15 شهریور 1396, 13:16 عصر
از این Sample بهتر دیگه نتونستم پیدا کنم :لبخند: :
https://stackoverflow.com/a/22505394/6661314

alibahman47
چهارشنبه 15 شهریور 1396, 15:40 عصر
از این Sample بهتر دیگه نتونستم پیدا کنم :لبخند: :
https://stackoverflow.com/a/22505394/6661314

ممنون بازهم هم زحمت کشیدید:تشویق:
منتهی این مورد یک فورم ایجکسی هست و همونطور که میدونید در این نوع Ajax.BeginForm فایلی به سمت سرور ارسال نمیشود ,

ولی اون افزونه رو که معرفی کردن:

jquery forms plugin (http://malsup.com/jquery/form/#file-upload)
<script src="http://malsup.github.com/jquery.form.js"></script>


نگفتن چطوری ازش استفاده کنیم !!!

کد مخزنش رو نگاه کردم بنظر عالی میاد با Jquery 3 هم سازگار و تا 2017 هم بروز شده (دقیقا همون چیزی هست که میخوام:قلب:),
منتهی کد Sample برای Mvc براش نگذاشتند , شما میدونید چطوری میشه از این مورد (https://github.com/jquery-form/form) استفاده کرد ؟

Moien Tajik
چهارشنبه 15 شهریور 1396, 16:57 عصر
آموزش زیاد ازش نیست ، خودتون باید Custom کنیدش :
http://mazharkaunain.blogspot.com/2011/06/jquery-form-plugin-with-aspnet-mvc.html
https://vivekcek.wordpress.com/2014/04/21/file-upload-with-asp-net-mvc-and-jquery-form-plugin/

alibahman47
پنج شنبه 16 شهریور 1396, 13:53 عصر
آموزش زیاد ازش نیست ، خودتون باید Custom کنیدش :
http://mazharkaunain.blogspot.com/2011/06/jquery-form-plugin-with-aspnet-mvc.html
https://vivekcek.wordpress.com/2014/04/21/file-upload-with-asp-net-mvc-and-jquery-form-plugin/

آقای تاجیک دمت گرم این مورد عالی بود همین دو نمونه هم برای فهمیدن شیوه کار کردن باهاش کافی بود.
واقعا دمت گرم همیشه بهترین ها رو معرفی میکنی :تشویق::قلب:

alibahman47
پنج شنبه 16 شهریور 1396, 16:12 عصر
آموزش زیاد ازش نیست ، خودتون باید Custom کنیدش :
http://mazharkaunain.blogspot.com/2011/06/jquery-form-plugin-with-aspnet-mvc.html
https://vivekcek.wordpress.com/2014/04/21/file-upload-with-asp-net-mvc-and-jquery-form-plugin/

برای این مورد (https://github.com/jquery-form/form)که معرفی کردید ,
بعد از انجام کار در سمت کنترولر باید یک مقدار جیسون سه قسمتی رو به سمت View برگشت بدم .
http://s9.picofile.com/file/8305803642/Controller.jpg

برای دریافت در سمت View به شکل زیر کد رو نوشتم ولی متاسفانه هیچ پیغامی نشون داده نمیشه.
http://s9.picofile.com/file/8305803034/3.jpg

از jquery-3.2.1.js و jquery.form-4.2.2.js استفاده میکنم !

Moien Tajik
پنج شنبه 16 شهریور 1396, 16:43 عصر
مرحله اول ، result رو داخل console.log بزارید بدون هیچ if ای ، مقدار هاشو چک کنید .
اون UserImg# هم آیدی تگ فرمتون هست دیگه ؟ اونجا باید به فرم reference بدید .

در return ها هم ، JsonRequestBehavior.AllowGet رو حتما قرار بدید: https://stackoverflow.com/a/8464685

alibahman47
جمعه 17 شهریور 1396, 14:43 عصر
مرحله اول ، result رو داخل console.log بزارید بدون هیچ if ای ، مقدار هاشو چک کنید .
اون UserImg# هم آیدی تگ فرمتون هست دیگه ؟ اونجا باید به فرم reference بدید .

در return ها هم ، JsonRequestBehavior.AllowGet رو حتما قرار بدید: https://stackoverflow.com/a/8464685

بازهم ممنون - مشکل حل شد.