مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

بهاره فیضی

عضویت از 1392/11/03

درج فرم به صورت Ajax و ارسال تصویر

  • یکشنبه 30 مهر 1396
  • 15:42
تشکر میکنم

فرض کنید باید فرمی رو به همراه یک تصویر به صورت ajax ای درج کنیم

برای آپلود تصویر میشه از پلاگین های جی کوئری مثل bluimp یا dropzonejs استفاده کرد

شرایط ایده آل اینه که کاربر فرم رو پر کنه و تصویر رو هم انتخاب کنه و در آخر دکمه submit رو کلیک کنه.
(در این حالت در هنگام انتخاب تصویر، تصویر در یک فولدر temp ذخیره میشه و با زدن دکمه داده ها به همراه نام تصویر در دیتابیس ذخیره میشن و خود تصویر هم به فولدر دائم move میشن، یعنی از فولدر Temp حذف میشن و به فولدر اصلی منتقل میشن)

ولی مشکل اینه که ممکنه کاربر تصویر رو انتخاب کنه (که تصویر می ره در فولدر temp ذخیره میشه)، ولی از ادامه کار منصرف بشه و دکمه ثبت رو کلیک نکنه.
که در این صورت یک فولدر Temp با تعداد زیادی تصویر خواهیم داشت که بی دلیل حجم سرور رو اشغال می کنه.

برای رفع این مشکل چه راهی رو پیشنهاد می کنید؟

(((پی نوشت:
............................

مورد 1. یک روش هم البته وجود داره که دو مرحله ای کردن کار هست، یعنی ابتدا کاربر فرم رو ثبت کنه و در مرحله بعد پلاگین آپلود تصویر بهش نشون داده بشه که از نظر من راه بدی نیست ولی ممکنه این برای یه سری مشتریا قابل قبول نباشه
البته این روش وقتی که بخواهیم به فرض گالری تصاویر رو برای محصولمون آپلود کنیم روش خیلی خوبیه ولی وقتی فقط یک تصویر بخواد درج بشه شاید زیاد جالب نباشه

............................

مورد 2. طبق جستجویی که کردم یک راه دیگه هم اینه که فقط یک دکمه برای درج فرم قرار بدیم و با درج همون دکمه فایل هم آپلود بشه
ولی روش هایی که من پیدا کردم یا از FormData استفاده کرده بودن یا از IFrame که طبق نتایجی که من به دست آوردم IFrame در موبایل ممکنه ناسازگاری داشته باشه و FormData هم در یه سری مرورگرها پشتیبانی نمی شه.

که با توجه به این دو مورد من به این نتیجه رسیدم که همون روش استفاده از پلاگین که در ابتدای تاپیک گفتم بهترین روش باشه به شرطی که اون مشکلی که بهش اشاره کردم حل بشه)))

پاسخ های این پرسش

تعداد پاسخ ها : 4 پاسخ
کاربر سایت

سهیل علیزاده

عضویت از 1396/04/09

  • یکشنبه 30 مهر 1396
  • 15:58

علت ثبت کردن تصویر در پوشه temp چیست ؟ چرا تصویر را به همراه اطلاعات دیگر به سرور نمی فرستید؟

کاربر سایت

بهاره فیضی

عضویت از 1392/11/03

  • یکشنبه 30 مهر 1396
  • 17:28

آقای علیزاده

اگه همچین امکانی بود که عالی بود ولی مسئله اینه که ارسال تصویر  به همراه اطلاعات دیگر به سرور به صورت ایجکسی با حالت سرورساید تفاوت داره و به این راحتی نیست و همونطور که در پاورقی مورد 2 توضیح دادم مشکلاتی از قبیل عدم سازگاری با یه سری مرورگرها و دیوایس ها وجود داره.

در پاورقی مورد 2 توضیح دادم.

شما این مورد رو انجام دادید؟ با پلاگین یا بدون اون؟ اگه ممکنه با کد منظورتون رو بیشتر توضیح بدید.

کاربر سایت

سهیل علیزاده

عضویت از 1396/04/09

  • یکشنبه 30 مهر 1396
  • 17:39

بله نمونه آن در topdev پیاده سازی شده است.

و برای این کار از DropZone(سفارشی شده) استفاده شده ، ابتدا تصویر را دریافت کرده و به base64 تبدیل می کنیم و آن را در view نمایش می دهیم(بدون ارسال به سرور) پس از این که کاربر برروی ثبت کلیک کرد اطالاعات به همراه عکس ارسال می شود.

کاربر سایت

بهاره فیضی

عضویت از 1392/11/03

  • یکشنبه 30 مهر 1396
  • 21:18

با پلاگین bluimp کار خیلی ساده بود.

من حواسم به این نبود که می شه توسط این پلاگین همه فایل ها رو ابتدا Add کرد بعد توسط دکمه start upload همه این فایل ها که در صف آپلود قرار گرفتن رو یک جا آپلود کرد.

اومدم کلیک دکمه start upload رو در success تابع درج فراخوانی کردم و نتیجه همونی شد که می خواستم.

success: function (response) {
                    

                    $("#uploadButton").click();
                },

با پلاگین dropzone هم یه همچین کاری میشه انجام داد، ولی اینکه روش خوبیه این کار یا نه رو نمی دونم.

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)