禁用 dropzone 页面刷新答案

【问题标题】：Disable dropzone page refresh禁用 dropzone 页面刷新
【发布时间】：2018-12-04 20:28:31
【问题描述】：

我已经搜索了几天，并找到了多种解决方案如何在上传后重新加载页面等等。我的问题是上传后页面会自动重新加载，我不希望这样。

我不确定我在这里缺少什么，但这是 dropzone 主页上的一个非常标准的设置。

function initDropzone() {


    var dz = new Dropzone('#fupld', {
        url: 'upload',
        autoProcessQueue: true,
        paramName: 'files',
        autoDiscover:false,
        init: function () {
            this.on('queuecomplete', () => {
            }),
                this.on('success', function (file, response) {
            });
            this.on('error', (file, response) => {
                console.log(response);
            });
        }
    });
}


<form class="fupld" action="@Url.Action("upload")" id="fupld" method="post">
    <div class="dz-message">Upload</div>
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

一切都按预期完成。上传文件，显示错误等。

我想要解决的唯一问题是，成功上传后页面会刷新，我不希望这样。

我的服务器端总是返回 Json 并且在任何地方都没有重定向。

我尝试挂接到提交事件并在成功上传后调用 preventDefault 并调用 dropzone disable() 但页面仍然刷新。

任何建议将不胜感激。

注意这是使用 .NET 上传。

【问题讨论】：

你能显示你的hmtl代码吗？
@ToujouAya 完成

标签： javascript .net ajax dropzone.js

【解决方案1】：

我参加这个聚会超级迟到了……但对我来说，我面临着同样的问题。发布后我的页面刷新了......问题原来是我用来开始上传的按钮没有 type="button" 所以最终 dropzone 帖子正在运行，以及按钮正常运行在表单上提交！

仅当您使用自己的表单作为放置区时才会发生这种情况（这样您也可以发布其他输入）。

【讨论】：

谢谢，我遇到了同样的问题，这也为我解决了。

【解决方案2】：

我希望这对可能面临同样问题的人有所帮助。

在不断更改 javascript 添加/删除修改事件处理程序和其他功能后，问题是在 Visual Studio 中打开了 BrowserLink 的事实。一旦我关闭 BrowserLink 一切似乎都正常，所以 browserlink 似乎在 200 响应后重新加载页面。

【讨论】：

【解决方案3】：

您是否尝试过停止事件的传播？连同 preventDefault https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

【讨论】：

【解决方案4】：

这样做：

const {getRootProps} = useDropzone({noDragEventsBubbling: true});

更多信息here

【讨论】：

您的解决方案仅适用于 react 而不是本机 javascript，它几乎没有帮助。