Html 处理POST请求时的进度图标

以下是初始条件：

后端：用于文件上传的servlet

UI:form，用于提交用于文件上载的servlet：

<iframe id="uploadFrame" name="uploadFrame"></iframe>
<form enctype="multipart/form-data" method="post" target="uploadFrame" 
      action="<%= request.getContextPath() %>/uploadFile?
      portletId=${portletId}&remoteFolder=${remoteFolder}">
...
</form>

...

单击此表单的提交按钮时，文件上传处于进度，相应的发布请求处于处理（可能会在FireBug中跟踪）

是否可以根据正在处理的此POST请求绘制进度图标？

我的意思是，如果POST正在处理，该网页应该显示progress.gif图标

也许可以使用原型库的Ajax.PeriodicalUpdater函数或其他解决方案

不管怎样，看起来没有ajax是不可能的

---

感谢您的帮助。

这里有一个很好的链接给您：

类似Prototype或JQuery的东西可能有一个更干净的解决方案，但在普通的旧javascript中，应该可以根据表单提交来控制进度图标的可见性（或者在DOM中添加一个新的进度图标。下面是一个简单的示例。您可能希望在现实世界中对此进行一些清理，以避免内联样式之类的丑陋内容：

Parent.htm

<script language="javascript">
   function ShowProgress() {
       document.getElementById("progress").style.display = "inline";
   }

   function HideProgress() {
       document.getElementById("progress").style.display = "none";
   }
</script>

<img src="progress.gif" id="progress" style="display: none"/>
<iframe id="uploadFrame" name="uploadFrame"></iframe>
<form enctype="multipart/form-data" onSubmit="showProgress" method="post" target="uploadFrame" >
   ...
</form>

函数ShowProgress（）{
document.getElementById（“progress”）.style.display=“inline”；
}
函数HideProgress（）{
document.getElementById（“progress”）.style.display=“无”；
}
...

SubmitResponse.htm（您的上传表单提交到的页面）

if（父HideProgress）{
parent.HideProgress（）；
}

在以前的一个项目中，我使用jQuery在iframe加载之后、ajax发布之前，将一个后期绑定的加载处理程序附加到iframe

// iframe configured

// call dopost func

function dopost() {
    //this dosnt work, its for illustration that you need to wrap the iframe
    var iframe = $('iframe');
    //setup a callback to remove the gif when postback is done 
    iframe.load(function(){
      //cleanup progress indicator
    });

    //inject your animated progress gif

    //start the submit and wait for callback
    form.submit();
}

---

回发完成后，您的回调函数将负责删除gif。

以及关于何时触发“HideProgress（）”函数的问题，以及现在如何完成回发，即文件已上载？“ShowProgress（）”看起来不错。谢谢。想法是对HideProgress（）的调用位于提交的结果页面上，在成功发布文件之前，不会向用户显示。或者，您可以使用setInterval定期检查iframe的readystate以获得类似结果。

// iframe configured

// call dopost func

function dopost() {
    //this dosnt work, its for illustration that you need to wrap the iframe
    var iframe = $('iframe');
    //setup a callback to remove the gif when postback is done 
    iframe.load(function(){
      //cleanup progress indicator
    });

    //inject your animated progress gif

    //start the submit and wait for callback
    form.submit();
}