Question

我试图通过AJAX和ASP.NET MVC从summernote插件执行图像上传到服务器。在检查了几个例子后，我能够创建以下JS代码： INIT：

$('#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调用在执行后会导致页面刷新。我试过添加＆＃34;返回false＆＃34;但它没有工作，我也无法使用preventDefault，因为我没有从summernote获得该事件。

有没有人知道为什么AJAX导致刷新？我怀疑罪魁祸首是＆＃34; FormData＆＃34;对象，但即使经过广泛的谷歌研究，我也无法找到任何证据或方法来阻止刷新。

Answer 1

所以，经过2天的研究谷歌的每个角落，这是一个猜测解决了它... 显然，我的网站通过AJAX保持文件上传（仅限文件上传！）的原因是因为Visual Studio＆＃34;浏览器链接＆＃34; !!! 我关闭它的那一刻问题就解决了！这似乎发生了，因为当我上传图片时，文件夹结构发生变化，导致浏览器链接调用刷新。

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

Answer 2

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

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

2 个答案: