禁用Dropzone页面刷新

Question

我已经搜索了几天，发现了多种解决方法，如何在上传后重新加载页面等。我的问题是，在上传后页面自动重新加载，而我不想这样做。

我不确定我错过了什么，但这是来自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 进行上传。

- AliK

---

你能展示一下你的HTML代码吗？ - ToujouAya

@ToujouAya 完成 - AliK

Answer 1

我很晚才加入这个派对……但是我也遇到了同样的问题。提交后我的页面一直在刷新……最终发现问题出在我使用的启动上传的按钮没有 type="button" 属性，所以最终导致 dropzone 的 post 方法运行，同时按钮也会向表单进行正常提交！

仅当您使用自己的表单作为 dropzone（这样您就可以提交其他输入）时才会出现此问题。

- Tim Burris

---

谢谢，我也遇到了同样的问题，这个方法对我也起作用了。 - Nite

非常感谢，我之前也遇到了类似的问题。 - Yonatan Naor

Answer 2

我希望这能帮助那些可能面临相同问题的人。

在不断更改 JavaScript 、添加/删除修改事件处理程序和其他函数后，问题的根源是 Visual Studio 中启用了浏览器链接。一旦关闭浏览器链接，一切似乎都没问题了，所以看起来浏览器链接会在 200 响应后重新加载页面。

- AliK

Answer 3

你尝试过在事件上使用 stopPropagation 吗？结合 preventDefault https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation

- Tengju Chi

Answer 4

做这个：

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

更多信息在这里

- Prottay

---

你的解决方案只适用于React而不是原生JavaScript，它几乎没有什么帮助。 - CrudaLilium