點擊文件提交加載圖片

我允許註冊用戶向服務器提交圖片。這裏的問題是，如果圖片尺寸太大或者用戶的互聯網連接速度慢（許多人仍然使用撥號），提交前需要一段時間。有些用戶在圖像加載過程中不斷點擊提交按鈕。在一個網站上，我看到一旦用戶點擊文件提交，表單消失並顯示加載圖像。我怎麼用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

點擊文件提交加載圖片

回答

相關問題