DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery不使用插件及swf實現無刷新文件上傳
jQuery不使用插件及swf實現無刷新文件上傳
編輯:JQuery特效代碼     

文件上傳是網站常用的功能,例如附件或圖片的上傳功能,解決方案也有很多,我們今天介紹一種通過jQuery無刷新的文件上傳方式。

首先,我們在頁面中放一個form,用來上傳文件:

代碼如下:
<form id="myForm" method="post" action="/asyncFileUpload/UploadHandler.ashx"
    enctype="multipart/form-data" target="asyncTarget">
    <span>文件:</span>
    <input type="file" name="myFile" />
</form>
<input type="button" value="上傳" id="btnUpload" />

然後,在頁面中放一個iframe,在上傳的時候只刷新iframe,而不是整個網頁:

代碼如下:
<iframe name="asyncTarget" style="display: none;"></iframe>

接下來使用js為按鈕添加功能:

代碼如下:
<script>
    $(function () {
        $("#btnUpload").click(function () {
            $("#myForm").submit();
        });
    });
</script>

在按鈕單擊的時候,將form提交。

這個方案可以簡單的實現無刷新的文件上傳。它的實現思路是:將form提交到一個iframe中,其它的處理就像處理普通的form提交一樣了。

這個方案的待完善地方是如何判斷上傳完成,目前只有一個思路:通過js監聽iframe的readystate,然後解析iframe的內容。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved