ارسال فایل به صورت ایجکس و ساخت progressBar

شما برای شروع این دوره آموزشی ابتدا باید با مفهوم FormData  و XMLHttpRequestدر جاوا اسکریپت آشنا باشید ! ( این کلاس به طور خیلی خلاصه فرم را  encode شده به صورت key , value نشان میدهد . )

در فرم بالا ما فرمی ساختیم که یک فایل رو به عنوان ورودی دریافت میکند خوب ما میخواییم زمانی که رویه فرم submit صورت گرفت اطلاعات رو بفرستیم پس ما میتونیم یه رویداد به فرممون اضافه کنیم 

var form = document.getElementById("form") ;
form.addEventListener("submit" , function(){
    event.preventDefault() ;
    alert("salam") ;
});

در این قسمت با مفهموم addEventListener آشنا میشید این تابع کارش گوش دادن به یک رویداد هستش ( ما رویداد های مختلفی مثل bind , click , change , submit و ... داریم ) زمانی که ما روی دکمه ثبت رو کلیک میکیم برای ما سلام رو نشون میده ! 

ولی ما میخواییم بعد کلیک کردن رو دگمه ثبت فایلی رو با ایجکس بفرستیم پس ما در این زمان باید از فرم خودمون رو به کلاس FormData پاس بدیم تا خروجی های فایل به صورت encode شده به ما تحویل بده 

پس ما به جایی نمایش هشدار سلام میتونیم بنویسیم : 

form.addEventListener("submit" , function(){
    event.preventDefault() ;
    var DataForm = new FormData( event.target ) ;
});

اگر شما تو برنامه نویسی پیشرفته سر رشته ای باشید ما مفاهیمی به نام event , listener داریم : به طور خیلی خلاصه تعریفش اینه که شما برو رویدادی (event) که بر روی فرم اعمال شد رو گوش بده(listener) 

دقیقا event همون رویداد ما هستش , الان رویداد های form داره بررسی میشه اگر شما از event.target یک بار console.log بگیرید متوجه عمق ماجرا میشید , که چه چیزی رو بر میگردونه برای شما المنت form رو بر میگردونه 

خوب بعد از اینکه متوجه شدید event چیه یه نگاهی هم به خط 2 بالا بندازیم مفهموم preventDefault ?! خوب وقتی ما فرمی رو submit میکنیم معمولا صفحه ما به صفحه action فرم ما هدایت میشه و اطلاعات رد و بدل میشه کار preventDefault اینه که ما نمیخواییم از دیفالت سیستم استفاده کنیم و بریم به صفحه که در action تعریف شده ( به همین سادگی ) ما با این خط کد جلوشو میگیریم .

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

چون تو این آموزش ساخت progess Bar با جی کوئری دارم آموزش میدم پس ما باید کتابخونه جی کوئری رو به سر آمد اضافه کنید که هم میتونید با پکیج منیجر npm این کار رو کنید و هم میتونید به وسیله html لینک این فایل رو قرار بدید .

$.ajax({
    xhr: function () {
        var request = new XMLHttpRequest();
        request.upload.addEventListener("progress", function () {
            if (event.lengthComputable) {
                var percentComplete = (event.loaded / event.total) * 100 ;
                console.log( percentComplete )
            }
        }, false);
        return request ;
    },
});

شاید مهمترین درس این بخش این چند خط کد بالا باشه بررسی میکنیم قرار چه اتفاقی بیوفته  تو این خط کد ما کلاس جدیدی به اسم XMLHttpRequest رو داریم میبینیم این کلاس کارش مدیریت درخواست به سمت سرور هستش به وسیله این کلاس ما میتونیم سایز فایل و مقدار حجمی که آپلود شده رو برگردونیم پس داریم : 

خط 3 : ساخت یک شی از کلاس XMLHttpRequest

خط 4 : به شی خودمون میگیم زمانی که درخواست آپلود داده شد و گوش بده زمانی که فایل در حال ارسال بود ( progess )  بیا برای من کالبک فانکشن رو اعمال کن 

خط 5 : کار اصلی lengthComputable اینه که وقتی رویداد من هنوز در حال انجامه و کل فایل هنوز ارسال نشده شرط رو اجرا کن دقت کنید .

خط 6 : این خط کارش اینه که مقدار ارسالی رو بر سایز اصلی تقسیم کنیم و نتیجه رو بر 100 ضرب میکنیم تا درصد ارسالی رو به دست بیارم به طور کلی فرمول زیر داره انجام میشه ؟

 پس اینجا با مفهمون event.total و event.loaded هم آشنا شدید 

100 *  (حجم کل / حجم ارسالی )  

خوب پس ما در console.log خط 7 درصد ارسالی رو داریم

پس به طور کلی درخواست ایجکس ما به این صورت میشود : 

var form = document.getElementById("form") ;
form.addEventListener("submit" , function(){
    event.preventDefault() ;
    var Data = new FormData( event.target ) ;
    var Action = event.target.action ;
    
    $.ajax({
        url : Action ,
        type : "POST" ,
        dataType : 'json',
        data : Data , 
        processData: false,
        contentType: false,
        cache: false ,
        xhr : function () {
            var xhr = new XMLHttpRequest();
            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percent = (evt.loaded / evt.total) * 100 ;
                }
            }, false);
            return xhr;
        },
        success : function(response) {
            //* زمانی که با موفقیت آپلود گردید *//
        }
    });
});

خوب این شد بخش در آوردن درصد ارسالی فایل , ولی چطور یه این مقدار رو داخل progressBar  قرار بدیم ؟!

این هم که معلومه با html css برای این کار باید انجام بدید من یه نمونه کد خیلی کوچیک برای این بخش مینویسم فک کنم نیاز به توضیح نداشته باشه css , html ...

من برای شما قطعه کدی به همراه کد php آماده کردم که میتونید با دقت ببینید و یاد بگیرید شما میتونید فایل ضمیمه رو دانلود کنید .