Question

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

Answer 1

使用jquery：您可以在document.ready中使用以下内容

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

Answer 2

通常我们在提交表单后无法显示加载图像，因为当我们最初提交表单时，它会向服务器发送请求，而加载只是因为上传后的服务器响应。加载服务器时，加载图像不会生成动画。

为了显示加载图像，我们必须做一些技巧 1。我们不应在同一窗口中提交表单，而是将表单发布到iframe。这可以通过将target属性添加到表单标记来完成。

＆lt; div id =“form-container”＆gt;
＆lt; form ... action =“uploadfilepath”target =“iframe_name”＆gt;
......................
......................
＆LT; /形式＆GT;
＆LT; / DIV＆GT;
＆lt; iframe name =“iframe-name”onsubmit =“showimage（）”style =“width：1px; height：1px; visibility：hidden;”＆gt;＆lt; / iframe＆gt;

2。我们必须添加脚本以在iframe中加载服务器时显示图像。

＆lt; img src =“loading image path”id =“image-container”＆gt;
＆LT;脚本＆GT;
function showimage（）{
的document.getElementById（ '形式容器'）的style.display = '无';
。的document.getElementById（ '图像容器'）的style.display = '块';
}
＆LT; /脚本＆GT;

3。上传文件后也添加脚本。

.......................................
.......................................
你的文件上传
代码到这里
.......................................
.......................................
最后打印脚本以重新加载父窗口或在父窗口中调用该函数。

Answer 3

最佳方法是完成整个事情的AJAX调用。

在所需位置放置带有display：none的图像，然后执行以下操作：

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

提交表单时显示图片？

3 个答案: