Summernote图片通过AJAX上传导致页面刷新答案

【问题标题】：Summernote image upload through AJAX causes page refreshSummernote图片通过AJAX上传导致页面刷新
【发布时间】：2017-12-22 15:03:30
【问题描述】：

我正在尝试通过 AJAX 和 ASP.NET MVC 将图像从 Summernote 插件上传到服务器。在检查了几个示例后，我能够创建以下 JS 代码：初始化：

$('#contentEditor').summernote({
            height: 520,                 // set editor height
            minHeight: 520,             // set minimum height of editor
            maxHeight: 520,          // set maximum height of editor
            callbacks: {
                onImageUpload: onImageUpload
            }
        });

图片上传：

function onImageUpload(files) {

        var data = new FormData();
        data.append("articleId", @(Model.Id));
        data.append("langId", @(Model.LanguageCode));

        for (var i = 0; i < files.length; i++) {
            data.append("files[" + i + "]", files[i]);
        }

        $.ajax({
            data: data,
            type: "POST",
            url: "@(Url.Action("UploadArticleImage"))",
            cache: false,
            contentType: false,
            processData: false,
            success: function (d) {
                if (!d.result) {
                    // TODO: Show error
                } else {

                    for (var i = 0; i < d.data.length; i++) {

                        $('#contentEditor').summernote('insertImage', d.data[i]);

                    }

                }
            }
        });

        return false;

    }

现在，图片上传工作正常，我得到了正确的路径，但由于某种原因，AJAX 调用在执行后会导致页面刷新。我尝试添加“return false”，但它不起作用，我无法使用 preventDefault，因为我没有从 Summernote 获得事件。

有人知道为什么 AJAX 会导致刷新吗？我怀疑罪魁祸首是“FormData”对象，但即使经过广泛的 Google 研究，我也找不到任何证据或阻止刷新的方法。

【问题讨论】：

您的代码应该可以工作。你测试的是哪个浏览器？
Chrome 版本 59.0.3071.115（官方版本）（64 位）
和我的浏览器一样。我还用 Edge 进行了测试，它也有效。嗯，这个好像没什么线索。

标签： javascript jquery ajax visual-studio summernote

【解决方案1】：

所以，经过 2 天研究谷歌的每一个角落，这是一个解决了它的猜测...... 显然，我的网站通过 AJAX 不断刷新文件上传（而且仅在文件上传！）的原因是因为 Visual Studio“浏览器链接”！！！在我关闭它的那一刻，问题就解决了！发生这种情况是因为当我上传图片时，文件夹结构发生了变化，并导致浏览器链接调用刷新。

这是一个很好的工具，但它似乎会导致一些意想不到的问题-_-

【讨论】：

你救了我的命

【解决方案2】：

我通过提交隐藏的<iframe> 来解决这个问题，我也提交嵌入 Summernote 的表单。然后当表单提交时，或者在用户如何感知编辑器中编辑内容的情况下保存时，我基本上屏蔽了编辑器以表示事情很忙，并确保他们不添加东西而不保存，然后在服务器上当数据返回到 iframe 时，我只使用 window.top.window.$('element blocking summernote') 类型的调用来删除或指示保存已完成。

【讨论】：