表單提交時顯示圖像？

使用Javascript我想在用戶點擊提交表單時顯示工作/加載圖像。該表單用於上傳視頻，因此可能需要一段時間才能上傳文件。一旦文件完成上傳頁面重新加載，所以加載圖像不再需要可見。表單提交時顯示圖像？

任何人都可以幫助我嗎？

<form method="POST" enctype="multipart/form-data" action=""> 
<input type="hidden" name="MAX_FILE_SIZE" value="5120000" /> 
<input type="hidden" name="upload" value="yes"> 

First Name: <input type="text" name="firstname"><br> 

Email: <input type="text" name="email"><br> 

Email Confirmation: <input type="text" name="email2"><br> 

Video Title: <input type="text" name="title"><br> 

Video Description: <input type="text" name="description"><br> 

Video to upload: <input type="file" name="uploadedfile"><br> 

Terms: <input type="checkbox" name="terms"> Must be checked to accept our terms of service.<br><br> 

<input type="submit" value="Upload Video"> 

</form>

來源

2011-06-06 JasonDavis

使用jQuery：您可以直接使用的document.ready

$("form").submit(function() { //you can assign id to your form and used that id instead of form 
$("#iamgeid").show(); 
return true; 
});

來源

2011-06-06 10:29:21 tejash

我無法得到這個工作要麼 – JasonDavis 2011-06-06 11:23:35

我把它改爲$（document）.ready（function（）{ $（「form」）。submit（function（）{//你可以指定id您的形式和使用的ID，而不是形式 \t $（「＃圖像標識」）顯示（）; \t迴歸真實; \t}）; }）;'和現在的工作 – JasonDavis 2011-06-06 11:30:07

最好的辦法中遵循將是一個AJAX調用做這件事。

將與顯示圖像：無所需的位置，然後做的這個小東西：

var d = document; 
var demoInterval; 
$("form").submit(function() { 
    $("img").show(); 
    demoInterval = setInterval(intervalFunc, 1000); 
}); 
function intervalFunc() 
{ 
    if(d.ready) // finished uploading video 
    { 
     window.clearInterval(demoInterval); 
     $("img").hide(); 
    } 
}

來源

2011-06-06 10:59:32 Devaffair

沒有一個提示整個代碼示例中的Ajax。 – Quentin 2011-06-06 11:03:01

這看起來不錯，但似乎沒有任何工作 – JasonDavis 2011-06-06 11:22:13

通常情況下，我們不能提交表單後顯示加載圖像，因爲當我們最初提交表單發送請求到服務器和加載只是因爲上傳後的服務器響應。當服務器加載時，加載圖像不會動畫。

要顯示加載圖片，我們必須做一些技巧。
1.我們不應該在同一窗口中提交表單，而必須將表單發佈到iframe。這可以通過將目標屬性添加到表單標籤來完成。

< DIV ID = 「形式容器」>
<形式...行動= 「uploadfilepath」目標= 「iframe_name」>
.... ..................
..... .................
</FORM>
</DIV>
< IFRAME名稱= 「iframe的名稱」的onsubmit =「showimage（）「style =」width：1px;高度：1px的;能見度：隱藏; 「> </IFRAME>

2.我們必須添加腳本來顯示圖像時，服務器加載iframe中

< IMG SRC =」裝載映像路徑「ID =」圖像容器「>
<腳本>
功能showimage（）{
document.getElementById（'form-container'）。style。顯示=「無」;
的document.getElementById（ '圖像容器'）的style.display = '塊'。
}
</SCRIPT>

3.還上傳文件後添加腳本。

.......................................
...... .................................
你的文件上傳
代碼去這裏
..... ..................................
.............. .........................
最後打印腳本以重新加載父窗口或在父窗口中調用該函數。

來源

2011-06-06 11:13:37 Jagadeesan

表單提交時顯示圖像？

回答

相關問題