表单提交时显示图像？

使用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

表单提交时显示图像？

回答

相关问题