带有进度的 Jquery Ajax Upload 正在重新加载页面答案

【问题标题】：Jquery Ajax Upload with progress is reloading page带有进度的 Jquery Ajax Upload 正在重新加载页面
【发布时间】：2018-01-18 06:19:24
【问题描述】：

我在提交 Jquery 表单时遇到了奇怪的问题。

上传完成后，页面正在重新加载，即使在服务器还没有完成处理。

服务器只是返回一个json成功状态，所以它不在服务器端。

代码如下：

$form.on('submit', function (e) {

        console.log('Submit form ' + fileNumber);
        if ($form.hasClass('is-uploading')) return false;

        $form.addClass('is-uploading').removeClass('is-error');

        if (isAdvancedUpload) {
            e.preventDefault();
            e.stopPropagation();
            var ajaxData = new FormData($form.get(0));

            var $input = $form.find('input[type="file"]');


            if (fileToUpload) { ajaxData.append($input.attr('name'), fileToUpload); }
            console.log('FileTo Upload: ' + fileToUpload);

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: ajaxData,
                dataType: 'json',
                xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progress, false);
                    }
                    return myXhr;
                },
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function (xhr,settings) {

                },
                complete: function (xhr, status) {
                    xhr.
                    //$form.removeClass('is-uploading');
                    //fileNumber++;
                    //fileToUpload = droppedFiles[fileNumber];
                    //if (fileToUpload) { $form.submit(); }
                },
                success: function (data,status,xhr) {
                    //$form.addClass(data.success === true ? 'is-success' : 'is-error');
                    //if (!data.success) $errorMsg.text(data.error);
                },
                error: function (xhr,status,error) {
                }
            });

        } else {
            // ajax for legacy browsers
        }
    });

问题就在这里：

   xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progress, false);
                    }
                    return myXhr;

如果我删除 return myXhr 上传后页面没有重新加载，但我没有进度报告。

我不知道如何防止重新加载。

谢谢。

【问题讨论】：

标签： javascript jquery ajax xmlhttprequest jqxhr

【解决方案1】：

我发现了问题。

xhr 对象不用担心。

问题来自 Visual Studio 浏览器链接。

关闭后，一切正常。

浏览器链接，一个明显的原因是重新加载页面。

将与 ASP.NET Core 团队一起了解

【讨论】：

【解决方案2】：

尝试更改按钮类型提交到按钮并实现点击功能

例如：

$( "#buttonID" ).click(function() {
  //your code
});

【讨论】：

表单不是通过按钮点击提交的。