GWT 上传表单导致浏览器重新冻结 Chrome 中的页面

Question

我们在 GWT 中有一个用于上传文件的上传表单。上传文件的时候效果很好，但是如果我们连续上传两个以上的文件，然后点击浏览器的后退按钮，就会发生奇怪的事情。页面消失，最终重新加载，然后冻结。在重新加载之前，没有按钮是可点击的。这发生在 Chrome 39 中，但不是我尝试过的其他浏览器（和旧版本的 firefox）。

为什么表单面板提交会做这样的事情？我该如何解决？我似乎找不到从历史记录中删除表单提交的方法，或者在不使用 GWT 的 FormPanel 和 FileUpload 的情况下上传文件的简单方法。我不能在每次上传文件后都重新加载页面，因为刷新很慢。

以下是创建面板相关部分的代码：

FormPanel uploadForm = new FormPanel();
uploadForm.setEncoding(FormPanel.ENCODING_MULTIPART);
uploadForm.setMethod(FormPanel.METHOD_POST);
uploadForm.setAction(servletPath + destinationUrl);

FileUpload fileInput = new FileUpload();
uploadForm.add(fileInput.asWidget());

当用户点击上传选定的文件时，我们使用：

uploadForm.submit();

GWTUploadProject 不是解决方案，因为它的效果可能更差。如果您在他们的examples page 上上传后尝试点击返回，则会显示之前上传图片的额外缩略图！

Answer 1

当您创建一个新的FormPanel 时，它还会创建一个Frame，以便在提交时将表单的输出发送给它，而不是更改当前页面。

问题是浏览器将焦点放在这个 iframe 上，使用浏览器历史记录，这会进入这个 iframe 重新触发 on-submit 事件。

您有不同的选择：

• 上传完成后，将ChangeHandler 删除到您的FileUpload。
• 从页面中删除 FormPanel 并在每次上传时创建一个新的。
• 分离FormPanel 的Frame 并在上传后重新附加它，以便将其从历史堆栈中删除。这是一个很大的技巧，但如果您想再次重复使用相同的面板，这可能是唯一的方法，这是 gwtupload 库中使用的方法。

reatachIframe(uploadForm);

private native static void reatachIframe(FormPanel form) /*-{
  var i = form.@com.google.gwt.user.client.ui.FormPanel::synthesizedFrame;
  var o = i.onload;
  i.onload = undefined;
  var p = i.parentElement;
  p.removeChild(i);
  p.appendChild(i);
  i.onload = o;
}-*/;