各種各樣的文件上傳
在開發(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://malsup.com/jquery/form/。
jQuery form 是一個(gè)腳本庫,它通過在頁面中動(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>
腳本庫的下載地址:http://malsup.com/jquery/form/#download。
聯(lián)系客服