Question

有下一个初始条件：

后端：用于文件上传的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>

点击此表单的提交按钮后，文件上传处于进度， POST请求相应处理（可以在FireBug中跟踪）。

是否可以依赖此POST请求来处理进度图标？

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

也许，可以使用Prototype lib的 Ajax.PeriodicalUpdater 函数或其他解决方案吗？

无论如何，看起来，没有ajax是不可能的。

感谢任何帮助。

Answer 1

像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>

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

<script language="javascript">
  if (parent.HideProgress) {
     parent.HideProgress();
  }
</script>

Answer 2

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

// 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。

Answer 3

这是一个很好的链接：http://pixeline.be/experiments/jqUploader/

POST请求正在处理时的进度图标

3 个答案: