Question

我允许注册用户向服务器提交图像。这里的问题是，如果图像的大小太大或者用户的互联网连接速度很慢（许多人仍然使用此处拨号），则需要一段时间才能提交。并且一些用户在图像处于加载过程中时一直单击提交按钮。在一个网站上，我看到一旦用户点击文件提交，表单就会消失并出现加载图片。我怎么能用jquery做到这一点？

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add"> 
<p align="center"><b>--- Upload Image ---</b><br> 
<input type="FILE" size="23" name="FILE"> 
<input type=submit value="Upload"> 
</p> 
</form>

Answer 1

只需向表单

添加一个提交事件处理程序

例如。像这样的东西

$('form').submit(function(){
  $(this).hide();
  $('#loadingimage').show();
});

其中loadingimage是具有ID loadingimage的元素，默认情况下是隐藏的。

Answer 2

这应该做类似的事情 - 当用户点击上传按钮时，隐藏整个上传表单（文件输入和按钮），而不是在其位置显示等待图像。当然，你可以在这里做更多的事情 - 一个带有“请等待”消息的模态对话框，你可以禁用上传按钮，这样用户就无法在上传过程中点击它等。

<form method="POST" ENCtype="multipart/form-data" action="imageupload.asp?Process=Add" id="uploadForm"> 
    <p align="center" id='uploadPanel'>
        <b>--- Upload Image ---</b><br> 
        <input type="FILE" size="23" name="FILE"> 
        <input type=submit value="Upload"> 
    </p>
    <p style='display:none' id='waitPanel'>
        <img src='wait.gif' title='Please Wait' />
    </p>
</form>

<script type='text/javascript'>
    $(document).ready(function() {
        $("#uploadForm").submit(function() {
            $("#uploadPanel").toggle();
            $("#waitPanel").toggle();
        });
    });
</script>

Answer 3

我想看看uploadify，它有一些功能可以让你的生活更轻松

取自他们的示例代码：

<input id="fileInput" name="fileInput" type="file" />
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader'  : 'uploadify.swf',
'script'    : 'uploadify.php',
'cancelImg' : 'cancel.png',
'auto'      : true,
'folder'    : '/uploads'
});
});
// ]]></script>

demo很好地解释了它正在做什么。

Answer 4

$('#imageform').submit(function () {
     $('#loader').show();
     $(this).hide();
});

这是做什么的：

使用id=imageform查找表单。（你可以这样做）
显示装载机。您之前使用style="display: none;"预先加载它，以便在必要时将其隐藏起来。
您隐藏了表单，因此用户不会再次单击“提交”按钮。禁用该按钮是另一种选择。

单击文件提交后加载图像

4 个答案: