如何取消文件上传？

Question

以下功能用于上传文件。现在我想在按钮点击时取消文件上传。怎么做？

function submitForm(form) {
        var loader = new Loader({showPgBar : true});
        var progressBar = loader.progressBar();
        loader.show();
        var data = new FormData(form);
        data.append("category", "MEDIA_FILE");
        var csrf_headerName  = $("meta[name='_csrf_header']").attr("content");
        var csrf_paramValue  = $("meta[name='_csrf']").attr("content");
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: URI.file.singleFileUploadUrl(),
            data: data,
            beforeSend: function (request) {
                request.setRequestHeader(csrf_headerName, csrf_paramValue);
            },
            processData: false,
            contentType: false,
            cache: false,
            timeout: 1740000,  //29 minutes
            success: function (data) {
                loader.hide();
                mediaFileMetaDataSave(data ,null);
                document.getElementById('media-file-form').reset();
            },
            xhr: function(){
                var xhr = $.ajaxSettings.xhr() ;
                xhr.upload.onprogress = function(data){
                    progressBar.updateStatus(data);
                };
                return xhr ;
            },
            error: function (e) {
                loader.hide();
                toastr.error('Error has occurred while uploading the media file.');
            }
        });

     }

编辑：

我已经调用了xhr.abort（），如下所示。虽然我点击了cancelFileUpload按钮但没有任何反应。我在浏览器中检查了控制台。也没有出现错误。

xhr: function(){
            var xhr = $.ajaxSettings.xhr() ;
            xhr.upload.onprogress = function(data){
                document.getElementById("cancelFileUpload").onClick = function(){
                    xhr.abort();
                }
                progressBar.updateStatus(data);

            };
            return xhr ;
        },

为什么这不起作用？