处理 POST 请求时的进度图标

发布于 2024-08-19 10:37:53 字数 765 浏览 9 评论 0原文

初始条件如下：

后端：用于文件上传的servlet；

UI：表单，提交用于文件上传的 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是不可能的。

感谢您的帮助。

原文

There are next initial conditions:

Backend: servlet for file uploading;

UI: form, that submits servlet for file upload:

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

When submit button for this form is clicked, that file uploading is in progress and POST request correspondingly is processing (may track in FireBug).

Is it possible to draw progress icon dependently on this POST request is processing?

I mean,that if POST is processing, that web page should show progress .gif icon.

Perhaps,it's possible with Ajax.PeriodicalUpdater function of Prototype lib or some other solution?

Anyway, looks like, it's impossible to do without ajax.

Thanks fo any help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我们只是彼此的过ke 2024-08-26 10:37:53

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

Something like Prototype or JQuery might have a cleaner solution, but in plain old javascript it should be possible to control the visibility of a progress icon based on the form submission (or add a new progress icon to the DOM. Here's a quick example. You'd probably want to clean this up a bit in the real world to avoid ugly stuff like inline styles:

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 (the page your upload form submits to)

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

回复收藏 0 原文

只怪假的太真实 2024-08-26 10:37:53

在之前的项目中，我使用 jQuery 在加载 iframe 之后和 ajax post 之前将后期绑定加载处理程序附加到 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。

In a previous project I used jQuery to attach a late bound load handler to the iframe after it had been loaded and before the ajax post.

// 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();
}

Once the postback is completed your callback function takes care of tearing down the gif.

回复收藏 0 原文