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是不是一个解决方案,因为它的工作原理可以说是雪上加霜.如果您尝试在上传示例页面后单击后退,则会显示以前上传图像的额外缩略图!

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;
}-*/;