在Iframe中非阻塞文件上传

Non Blocking File Upload in Iframe

本文关键字：文件 塞文 Iframe      更新时间：2023-09-26

我有一个按钮，当点击打开一个覆盖，这是一个窗体在iframe。有一个文件上传，我成功地使覆盖消失，并在提交时将父窗口重定向到另一个页面。问题在这里:

如果用户上传一个巨大的文件，文件必须在用户被重定向之前先上传。是否有另一种方式上传文件，同时关闭覆盖层，父窗口重定向而不丢失文件上传?

亲切的问候,

对我来说，解决方案很简单。不要使用iframe进行文件上传。只需将带有文件上传对话框的表单放入主页面。如果上传完成，服务器可以将重定向发送回客户端，然后将用户重定向到新站点。或者这么简单的解决方案有问题吗?

因为简单的解决方案不起作用，我建议另一个解决方案。向iframe添加一个onload事件监听器。如果调用onload事件的事件处理程序(这意味着文件上传完成)，则重定向用户。要重定向用户，你可以使用window.location.href = "your new url";，但要注意，你添加事件监听器后，iframe的文件形式完全加载，或者你必须忽略第一个触发的事件(这将是加载的文件形式)在你的事件处理程序。

试试这个…

  1. 当表单提交完成(意味着文件上传)在服务器端，你需要设置一个会话标志，如$_SESSION['file_upload '] = TRUE;

在父窗口的step1之前，您需要编写一个ajax函数来检查会话。即js ajax函数在overlay(iframe)加载后不断与服务器联系。
当服务器返回true时，您可以隐藏覆盖，然后将页面重定向到其他位置。

为此，我使用Valum的插件或jQuery表单插件。

如果您坚持iframe文件上传，请参阅旧版本的Valum的AJAX文件上传。要么使用他的包，要么查看代码以获得灵感。不要被名字搞混了;它不使用AJAX，而是使用iframe上传文件。

请注意，新版本的Valum插件可能也使用AJAX。

相关文章：