/ / Икона за напредък, докато се обработва POST заявка - html, ajax, формуляри, пост, заявка

Иконата за напредъка, докато заявката за POST обработва - html, ajax, формуляри, поща, заявка

Има следващи начални условия:

бекенда: сървлет за качване на файлове;

UI: формуляр, който изпраща сервлет за качване на файлове:

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

Може би е възможно Ajax.PeriodicalUpdater функцията на Prototype lib или друго решение?

Както и да е, изглежда, че е невъзможно без аякс.

Благодаря за всяка помощ.

Отговори:

8 за отговор № 1

Нещо като Prototype или JQuery може да има aпо-чисто решение, но в обикновен стар 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="/images/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>

3 за отговор № 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.


1 за отговор № 3

Ето хубава връзка към вас: http://pixeline.be/experiments/jqUploader/


Свързани въпроси


Коментари (0)

Добави коментар