2009-11-01 143 views
2

我想採取我的表格,並以某種方式調整它以提交表單時,用戶選擇一個文件。我怎樣才能做到這一點?提交文件上傳/表單上的文件選擇

<div id=uploadform style="width:500px;margin-left:auto;margin-right:auto;"> 
    <form enctype="multipart/form-data" action='' method='POST'> 
     <input type="file" name="imagefile" class=browse> 
     <input type='submit' value='Upload' class=uploadsubmit onClick="if($('#loading').css('display') == 'none') { $('#loading').show('fast'); $(this).hide('fast'); };"> 
     <input type='hidden' value='1' name='submitted' /> 
    </form> 
</div> 
<div id=loading style="display:none;"> 
    <img src=uploading.gif> 
</div> 

由於按鈕將缺席(理想),我怎麼還顯示我的圖像加載層提交後?爲了說明,我希望提交按鈕本身消失,當用戶選擇一個文件時,提交表單並顯示#loading圖層。

回答

4

你可以陷阱提交事件:

$("#uploadform form").submit(function() 
{ 
    $("#uploadform").hide(); 
    $("#loading").show(); 
}); 
+0

在哪裏可以實現這個功能?內聯文件輸入?或頁面頂部?要麼?? – mrpatg 2009-11-01 15:29:13

+0

可能要調整,以便第3行只隱藏按鈕。 $( '#uploadsubmit')隱藏()。 – 2009-11-01 15:30:15

+0

很可能你會把它放在包含$(document).ready(function(){})的腳本標籤內的文檔頭部; – 2009-11-01 15:34:34

1

您可以使用文件元素onChange事件處理程序,但已知有瀏覽器不兼容的問題,也許jQuery的可以處理你雖然。當然,在事件處理程序中,您將提交表單並顯示您的加載對話框。如果你想避免頁面的刷新,那麼表單將不得不在IFrame中提交,否則你的加載對話框將不會顯示很長的時間... :)