点击文件提交加载图片

我允许注册用户向服务器提交图片。这里的问题是，如果图片尺寸太大或者用户的互联网连接速度慢（许多人仍然使用拨号），提交前需要一段时间。有些用户在图像加载过程中不断点击提交按钮。在一个网站上，我看到一旦用户点击文件提交，表单消失并显示加载图像。我怎么用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>

来源

2009-11-11 Zannube D.

我想说看看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解释非常好那是什么这样做。

来源

2009-11-11 15:39:35 marcgg

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

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

来源

2009-11-11 15:39:38

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

这样做是：

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

来源

2009-11-11 15:39:41

只需添加一个提交事件处理程序的形式

如。像这样的东西

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

其中，loadimage是一个ID为ID的元素，默认情况下是隐藏的。

来源

2009-11-11 15:40:47

点击文件提交加载图片

回答

相关问题