在提交之前，uploadProgress在ajax jquery中不起作用

Question

can any one help me in this problem and i try many ways but beforeSubmit and uploadProgrss doesnt work

$.ajax({
    url:"include/ajaxPages/admin/insertNewItem.php",
    type:"POST",
    data:new FormData(this),
    processData:false,
    contentType:false,
    beforeSubmit:function(){
        $(this).find(".progress").width("0%");
    },
    uploadProgress:function(event,position,total,complete){
        $(this).find(".progress").animate({
            width: complete+"%"
        },{
            duration:1000 
        })
    },
    success:function(data){
        console.log(data);
        alert("تم الاضافه بنجاح");
        $(".loadingViedo").fadeOut();
        window.location = document.URL;
    }
})

Answer 1

Try this:

var fd = new FormData();
fd.append('rName', $('#upload-resource .upload').attr('data-name'));
fd.append('rfile', $('#upload-resource .upload').attr('data-file'));

$.ajax({
            url: 'include/ajaxPages/admin/insertNewItem.php',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            xhr: function () {  // custom xhr
                myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) { // if upload property exists
                    myXhr.upload.addEventListener('progress', function (e) {
                        var done = e.position || e.loaded
                        var total = e.totalSize || e.total;
                        var percent = Math.round(done / total * 100);
                        //console.log('xhr progress: ' + percent + '%');

                        $(this).find(".progress").animate({
                        width: percent +"%"
                           },{
                              duration:1000 
                           });
                    }, false);

                    myXhr.addEventListener('load', function (e) {
                        //upload done
                    });


                    $('#upload-resource .cancel').show().click(function () {
                        //cancel upload
                        myXhr.abort();
                    });
                }
                return myXhr;
            },
            success: function (data) {
                //to do for success result
            }
        });