Question

我使用以下代码上传文件和数据。

$(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();
    });
});

我想跟踪进度请告诉我该怎么做。我知道jquery.form.js有uploadprogress事件。但我不想使用图书馆。我做了一些修改但是在修改之后;它没有发送任何网络请求，虽然该功能正在执行我通过警报检查了这一点这是代码。

$(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});
                }
            }

Answer 1

您可以使用blueimp文件上传插件 http://blueimp.github.io/jQuery-File-Upload/ 我也使用相同的插件。

示例：

    $('#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) {

                   }
                });

如何使用jquery跟踪文件上载的进度

1 个答案: