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

我试图通过AJAX和ASP.NET MVC将summernote插件上传到服务器。初始化：通过AJAX进行的Summernote图片上传导致页面刷新

$('#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; 

    }

现在，图片上传的作品和我得到了正确的路径，但检查的几个例子，我能够创建下列JS代码后出于某种原因，AJAX调用在执行后会导致页面刷新。我试着添加“返回false”，但它没有工作，我无法使用preventDefault，因为我没有从summernote中获取事件。

有没有人有任何想法为什么AJAX导致刷新？我怀疑罪魁祸首是“FormData”对象，但我无法找到任何证据或方法来防止刷新，即使经过广泛的Google研究。

来源

2017-07-17 Ben

你的代码应该工作。你测试过哪个浏览器？ –

Chrome版本59.0.3071.115（官方版本）（64位） – Ben

与我的浏览器相同。我还用Edge进行了测试，它也起作用。嗯，这似乎不是线索。 –

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

这是一个很好的工具，但现在看来，这可能会导致一些意想不到的问题-_-

来源

2017-07-18 19:01:56 Ben

你救了我的命 –

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

来源

2017-12-22 14:50:24 Diemen

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

回答

相关问题