無刷新的上傳： jQuery form

悟靜 2012-02-16

展開全文

各種各樣的文件上傳

在開發(fā)中，除了使用 FileUpload 之外，我們還有很多的方法用來實(shí)現(xiàn)上傳文件，有的甚至不需要我們?cè)诜?wù)器端進(jìn)行特殊的操作就可以顯示上傳的進(jìn)度。

2.6.1　無刷新的上傳： jQuery form

使用 FileUpload 是需要刷新頁面的，在當(dāng)前的 Web 2.0 之下，顯然有點(diǎn)不合時(shí)宜。jQuery form 可以實(shí)現(xiàn)無刷新的文件上傳。項(xiàng)目的地址：http:///jquery/form/。

jQuery form 是一個(gè)腳本庫(kù)，它通過在頁面中動(dòng)態(tài)嵌入一個(gè)iFrame，使用iFrame去上傳文件，來實(shí)現(xiàn)無頁面刷新的文件上傳。不過，服務(wù)器端的處理其實(shí)就是正常的文件上傳過程，我們可以直接使用 ASP.NET 內(nèi)置的上傳處理。一定要記得設(shè)置足夠大的請(qǐng)求大小。

使用方式如下：

1）創(chuàng)建一個(gè)標(biāo)準(zhǔn)的上傳文件表單。

<form id="myForm" action="comment.php" method="post"> 
    Name: <input type="text" name="name" /> 
    Comment: <textarea name="comment"></textarea> 
    <input type="submit" value="Submit Comment" /> 
</form>

2）在頁面中加入腳本。

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 
 
    <script type="text/javascript"> 
        // wait for the DOM to be loaded  
        $(document).ready(function() {  
            // bind 'myForm' and provide a simple callback function  
            $('#myForm').ajaxForm(function() {  
                alert("Thank you for your comment!");  
            });  
        });  
    </script> 
</head>

需要注意的是，服務(wù)器返回的 ContentType，由于在使用 iFrame 實(shí)現(xiàn)上傳的時(shí)候，服務(wù)器返回的內(nèi)容將會(huì)被賦予這個(gè) iFrame，所以，返回內(nèi)容的類型最好是 HTML或者 XML，如果是返回 JSON 或者腳本的話，可以使用 textarea 包圍起來。

<textarea> 
    for (var i=0; i < 10; i++) {  
        // do some processing  
    }  
</textarea>

腳本庫(kù)的下載地址：http:///jquery/form/#download。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：悟靜 > 《.net和asp.net》

舉報(bào)/認(rèn)領(lǐng)