50درصد تخفیف سورس فروشگاهی دیجی کالا + اپلیکیشن اندروید تا پایان این هفته - کد تخفیف : off50
با تخفیف میخرم

آپلود چندگانه فایل توسط php , jquery و Ajax

  • آپدیت شده در تاریخ

آپلود چندگانه فایل توسط php , jquery و Ajax

قصد داریم یک سیستم با آپلود چندگانه فایل توسط php را بدون اینکه صفحه ریفرش شود را پیاده سازی کنیم .

با استفاده از اسکریپتی که آماده کردیم می توانید همه عکس ها را یکجا بدون بارگذاری مجدد صفحه (Refresh)  توسط php , jquery و Ajax آپلود کنید.

به شما دو روش برای نمایش عکس بعد از آپلود را نشان می دهیم . بار اول که عکس توسط جی کویری داخل سرور آپلود شد , می توانید عکس را بدون آنکه در فولدر ذخیره شود.

این اسکریپت بسیار کوتاه , آسان و پرکاربرد است که می توانید به راحتی در پروژه های تحت وب خود پیاده سازی کنید .

آپلود چندگانه فایل توسط php , jquery و Ajax

راهنمای قدم به قدم زیر را کامل بخوانید تا درک کلی از کل فرایند آپلود چندگانه فایل توسط php , jquery و Ajax داشته باشید.

فایل index.html

فایل index.html شامل کد های جاواسکریپت و html می باشید . که همه ی کد ها در اینجا قرار دیدم . کد جاواسکریپت : اول از همه دو کتابخانه jquery.min.js و  jquery,form.js را در صفحه فراخوانی می کنیم. Jquery.min.js کتابخانه اصلی خود جی کویری است و jquery.form.js نیز برای submit فرم برای آپلود فایل ها توسط جی کویری ajax است.

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

کد html مقدار مشخصه name ورودی فایل input به صورت آرایه تعریف شده تا بتواند اسم چندگانه فایل ها را ذخیره کند و همچنین مشخصه multiple برای آپلود چندگانه استفاده شده است.

یک div با id ی که در کد جاواسکریپت بالا تعریف شده است می سازیم . عکس آپلود شده در این تگ div نمایش خواهد داد . می توانید id تگ div را تغییر بدید ولی به خاطر داشته باشید باید مقدار (target:’#images_preview’) با آی دی که تعریف کردید یکسان باشد.

فایل upload.php

فایل upload.phpشامل کدهایی برای فرایند آپلود و پیش نمایش عکس است . دو راه برای آپلود و نمایش عکس وجود دارد روش اول ساخت فولدری با اسم uploads/ است . آپلود عکس و ذخیره در فولدر .

روش دوم می توانید بدون آنکه فایل عکس در جایی ذخیره شود نمایش دهید.

ساخت پیش نمایش تصویر

بعد از آپلود نیاز داریم که پیش نمایش را بسازیم . این پیش نمایش در تگ div نمایش داده می شود.

جمع بندی

این آموزش و اسکریپت به شما کمک می کند که آپلود چندگانه فایل توسط php , jquery و Ajax داشته باشید . آپلود پیشرفته عکس مثل drag & drop (کشیدن و رها کردن)  را در مقالات بعدی خواهیم دید . پس با عضویت در خبرنامه زودتر از مقالات سایت با خبر شوید . موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۱۰)

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

  1. amineslami ۱۸ شهریور ۱۳۹۹

    بسیار عالی ممنون

    پاسخ
  2. پوریا ۱۷ شهریور ۱۳۹۹

    با سلام
    تشکر بابت این آموزش و همچنین دیگر آموزش های مفیدتون.
    جناب شفیعی اگر امکانش هست لطفا سورس کد این بخش رو برای دانلود ارائه بفرمایید، چون این مطلب بخش باکس دانلود نداره.
    باتشکر

    پاسخ
    1. حسن شفیعی ۱۷ شهریور ۱۳۹۹

      سلام. خوشحالیم ک مفید واقع شده.
      سورس اضافه شد.
      موفق باشید.

      پاسخ
  3. رها ۶ آذر ۱۳۹۷

    با سلام.من نیاز ب یادگیری اپلود فایل با ajax رو دارم با اینکه با کامپیوتر اشنایی دارم ولی هیچی از این اموزش اپلود فایل ها در گوگل متوجه نشدم. من الان چیکار کنم ؟
    اموزش دیگه ای وجود نداره من تا حالا فایلی رو اپلود نکردم و اشنایی هم ندارم

    پاسخ
    1. حسن شفیعی ۷ آذر ۱۳۹۷

      سلام. می توانید لینک های زیر را به ترتیب مطالعه کنید
      https://netparadis.com/upload-file-php/
      https://netparadis.com/php-ajax-image-upload/

      موفق باشید.

      پاسخ
  4. سعید ۱۶ مهر ۱۳۹۷

    سلام اقا این کتابخانه ها که فراخوانی کردید لینک دانلودشون رو میذارید

    پاسخ
    1. حسن شفیعی ۱۶ مهر ۱۳۹۷

      سلام. تماما داخل سورس کاملی که در بخش “باکس دانلود” قرار دادیم وجود داره .
      موفق باشید.

      پاسخ
  5. arefmohajerrad ۱۲ آبان ۱۳۹۶

    سلام مهندس
    میخام یه متغیر جاوا اسکریپتی رو به متغیر php تبدیل کنم باajax
    کمک کنین ممنون میشم

    پاسخ
    1. حسن شفیعی ۱۲ آبان ۱۳۹۶

      سلام .
      اگر قصد دارید مقدار یک متغییر جاواسکریپت رو با ajax به صفحه php ارسال کنید به سادگی میتونید به اینصورت هستش
      var id=12;
      $.ajax({
      method:'post',
      url:"upload.php",
      data:{fileid:id}
      );

      در صفحه php این مقدار رو به اینصورت دریافت می کنیم
      $fileid = $_POST['fileid'];
      اگر منظورتون این نبود لطفا یکم دقیقتر بگید تا بهتر راهنمایی کنم
      موفق باشید

      پاسخ
      1. پونه ۱۶ مرداد ۱۳۹۷

        سلام
        میشه بپرسم چرا مقدار $_post رو فالس برمیگردونه در صورتی که ما درون اون فایل اپلود میکنیم؟
        و ی سوال دیگه فقط این نوع تایپ در input ها این خاصیت رو داره؟ چون من نوع text رو امتحان کردم true برمیگردونه

        پاسخ
      2. حسن شفیعی ۱۷ مرداد ۱۳۹۷

        سلام . فایل های آپلود شده از طریق $_FILES قابل دسترسه و با $_POST میتونید مقادیر فیلدهای دیگه رو دریافت کنید.

        موفق باشید.

        پاسخ
دوره های آموزشی

دانلود رایگان کتاب آموزش PHP

صفر تا صد PHP و MySQL را یکجا یاد بگیرید
همین الان دانلود کن
نگران نباشید. ایمیل‌های مزاحم نمی‌فرستیم
close-link