单击按钮时显示和图像打开（重新提交）答案

【问题标题】：Display and image on when a button is clicked (resubmission)单击按钮时显示和图像打开（重新提交）
【发布时间】：2014-03-18 09:14:46
【问题描述】：

页面 (http://www.squishypig.com/ft/uploads/) 有一个上传脚本（如下）我希望能够在用户点击提交提交文件时显示加载图像。

这里是有问题的代码：

<td width="500">
</td>
</tr>
</table>
<center>
<p>
<table>
<tr>
<td bgcolor="white">
<form action="/cgi-bin/upload.cgi" method="post" enctype="multipart/form-data">
<input type="File" name="FILE1">
<p>
<input type="File" name="FILE2">
<p>`
<input type="File" name="FILE3">
<p>
<input type="File" name="FILE4">
<p>
<input type="File" name="FILE5">
<p>
<input type="File" name="FILE6">
<p>
<input type="File" name="FILE7">
<p>
<input type="File" name="FILE8">
<p>
<input type="File" name="FILE9">
<p>
<input type="File" name="FILE10">
<p>

<input type="Submit" value="submit">

</form>
</td>
</tr>
</table>
</center>

我想在单击提交按钮时显示“加载”图像，但仍保留旧功能（上传）。

提前致谢，马特

【问题讨论】：

您可以使用 Ajax 提交表单数据并显示图像以及使用 jquery 'code' $("#submitBtn").click

标签： html image button onclick

【解决方案1】：

您可以使用 Ajax 提交表单数据并显示图像

使用 jquery 的东西

$("#submitBtn").click(function(){
    $("#loadingImage").show(); //show the loading image
    $.post('/cgi-bin/upload.cgi',{yourdata}, {callback}) // submit your form, after the success of submission you can hide the image using hide() method
})

在 jquery docs 上查看 $.post 的更多信息，希望对您有所帮助！

谢谢，迪拉吉

【讨论】：

【解决方案2】：

Add Following code to page

<input type="Submit" value="submit" onclick="$('#loading').show();">

<div id="loading" style="display:none;"><img src="loading.gif" alt="" /></div>

【讨论】：