تعرف انك تقدر ترفع Form كاملة ب ajax حتى لو فيها ملفات بسطر كود واحد؟!

معلومة سريعة ..
تعرف انك تقدر ترفع Form كاملة ب ajax حتى لو فيها ملفات بسطر كود واحد؟!
-----
لو بتستخدم Jquery يا عزيزي ..
ف أحب أقولك إنك تقدر ترفع Form كاملة ب Ajax بدون أي مجهود ..
لو عندك 50 input موجودين جوه form معينة وعايز ترفعهم كلهم بنفس ال input name بتاعهم ..
كل اللي عليك انك بدل م تستخدم

$.ajax({});

هتستخدم 

$(".ajax-form").ajaxForm({});

وتحط ال class دا "ajax-form" على ال Form اللي عايز تشتغل عليها ..
-----
الجميل بقى يا عزيزي خد عندك ..
ال plugin دي بتوفرلك شوية functions جامدين ..
زي success - uploadProgress - beforeSend - complete - error وغيرها كتير من ال functions اللي هتفيدك أثناء عملية الرفع 
الجامد جداً إنك تقدر تعمل process bar لو عندك مثلاً ملفات بتترفع وعايز تشوف اترفع كام% وباقي كام% جوه function ال uploadProgress بالشكل دا .

uploadProgress: function(event, position, total, percentComplete) {}

اللي هيعجبك جداً انها بتاخد ال configration من ال form اللي انت بتشتغل بيها .
زي ال method و ال action وال attributes ..
الجامد بردو انك تقدر تعمل function واحدة وترميها في ملف ال js عندك . وتاخد مثلاً ال alert success message من ال form نفسها عن طريق ال data-attribute بالشكل دا بحيث بنفس ال function العميل ميحسش انها function ثابتة

<form data-success="تمت عملية تغيير الصورة الشخصية بنجاح" ></form>

تقدر تعمل شريط اكتمال الرفع بالشكل دا يا عزيزي ..

$('.ajax-form').ajaxForm({
    success:function(data,textStatus,jqXHR,$form){
        $('.progress-container').fadeOut(0);
        $('#personal-video-url').attr('href',data.video_url);
    },
    uploadProgress: function(event, position, total, percentComplete) { 
        $('.progress-container').fadeIn(0);
        $('.progress-bar').css({width: total});
    }
});

وتحط ال html code دا لو انت بتستخدم bootstrap5 مثلاً .. أو طبعاً تقدر تعدل عليه وتظبطه زي م انت عايز

<div class="col-12 ">
                            <div class="col-12 px-0 progress-container" style="position:relative;overflow: hidden;top: -10px;height: 8px;display: none;">
                                <div class="progress rounded-0" style="position:absolute;width: 100%;height: 8px;">
                                  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
                                </div>
                            </div>
                        </div>

حابب أفكرك انك محتاج تحط رابط ال plugin من ال cdn لأنها مش مدموجة في jquery للأسف

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

وتقدر طبعاً تحط ال options بالطريقة التقليدية

var options = {
  target:  '#divToUpdate',
  url:     'comment.php',
  success: function() {
    alert('Thanks for your comment!');
  }
};

// pass options to ajaxForm
$('#myForm').ajaxForm(options);

تقدر يا عزيزي تشوف كل ال docs من هنا 

https://jquery-form.github.io/form/options/

أو حتى تراجع الريبو في Github من هنا 

https://github.com/jquery-form/form