How to track progress of file upload using jquery

Question

I am using the following code to upload the file and data.

$(function() {
    //Callback handler for form submit event
    $("#core").submit(function(e)
    {
        var formObj = $(this);
        var formURL = formObj.attr("action");
        var formData = new FormData(this);
        $.ajax({
            url: formURL,
            type: 'POST',
            data: formData,
            mimeType: "multipart/form-data",
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, textStatus, jqXHR)
            {
            },
            error: function(jqXHR, textStatus, errorThrown)
            {
            }
        });
        e.preventDefault(); //Prevent Default action. 
        //e.unbind();
    });
});

I want to track the progress please tell me how to do it. I know the jquery.form.js has the uploadprogress event. But I don't want to use the library. I made some modifications but after the modification; it is not sending any network request although the function is executing i checked this via alert here is the code.

$(function() {
                //Callback handler for form submit event
                $("#core").submit(function(e)
                {
                    alert("Hello");
                    var formObj = $(this);
                    var formURL = formObj.attr("action");
                    var formData = new FormData(this);
                    $.ajax({
                        url: formURL,
                        type: 'POST',
                        data: formData,
                        mimeType: "multipart/form-data",
                        contentType: false,
                        cache: false,
                        processData: false,
                        xhr: function() {
                            var myXhr = $.ajaxSettings.xhr();
                            if (myXhr.upload) {
                                myXhr.upload.addEventListener('progress', progress, false);
                            }
                            return myXhr;
                        },
                        success: function(data, textStatus, jqXHR)
                        {

                        },
                        error: function(jqXHR, textStatus, errorThrown)
                        {
                        }
                    });
                    e.preventDefault(); //Prevent Default action. 
//                    e.unbind();
                });

            });
            function progressHandlingFunction(e) {
                if (e.lengthComputable) {
                    $('progress').attr({value: e.loaded, max: e.total});
                }
            }

@Carpetsmoker, Please see where i made a mistake? – Sahil Manchanda Mar 16 '15 at 11:42 — Sahil Manchanda, Mar 16 '15 at 11:42

score 0 · Answer 1 · edited Mar 18 '17 at 21:36

You can use the blueimp file upload plugin http://blueimp.github.io/jQuery-File-Upload/ I am also using the same plugin for this.

Example:

    $('#filemytask').fileupload({
                    add: function (e, data) {
                        var uploadErrors = [];
                        if (parseInt(data.originalFiles[0]['size']) > 10000000) {
                            uploadErrors.push('Filesize is too big, should be less than 10MB');
                        }
                        if (uploadErrors.length > 0) {
                            alertPanel(uploadErrors.join("\n"));
                        } else {
                            $('.progress2').show();
                            data.submit();
                        }
                    },
                    progress: function (e, data) {
                        $('.progress2').show();
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('.progress2 .bar').css(
                            'width',
                            progress + '%'
                        );
                        $('.percent').html(progress + '%');
                    },
                    progressall: function (e, data) {
                        var progress = parseInt(data.loaded / data.total * 100, 10);
                        $('.progress2 .bar').css(
                            'width',
                            progress + '%'
                        );
                        $('.percent').html(progress + '%');
                    },
                    url: '/Company/Attachfile',
                    dataType: 'json',
                    formData: { projectId: "0" },
                    done: function (e, data) {

                   }
                });

You need to check here http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously — Umesh Sehta, Mar 16 '15 at 11:45
I checked there use the code to track the progress see my updated question. I took some code from olanod's anwser on that page — Sahil Manchanda, Mar 16 '15 at 11:48

How to track progress of file upload using jquery

1 Answers1