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

Question

我正在尝试通过 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 研究，我也找不到任何证据或方法来阻止刷新。

Answer 1

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

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

Answer 2

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

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

Summernote image upload through AJAX causes page refresh

javascript

ajax

jquery

visual-studio

summernote