我的思想是這樣的,把上傳控件放在第一項,用戶最先選擇上傳文件,此時用無刷新實現(xiàn),用戶選擇后即開始上傳圖片,此時用戶可以繼續(xù)填寫余下的相關(guān)信息,用戶最后提交的時候判斷下圖片是否已經(jīng)上傳成功,未成功的情況下,禁止提交數(shù)據(jù)庫進行注冊操作.這樣就在用戶填寫繁鎖信息的同時分擔了文件上傳的時間,從而直到優(yōu)化的效果.

    而這種無刷新上傳的技術(shù),我知道的有兩種方法(其它的方法本人還沒有嘗試過):

    第二:利用ajax.net中的updatepannel控件.

    現(xiàn)在就第一種方法我說下我的實現(xiàn)過程.第二種就不重點討論了,應(yīng)該是沒問題的.

    嵌套iframe共有兩個頁面:

   2:iframe中的內(nèi)容頁WebForm3.aspx

Code

   它的內(nèi)容也比較簡單,這里為了說明方便,就不實現(xiàn)具體的上傳過程了,如果是用戶提交的文件,則顯示出文件名稱即可.

     if (Request.Files.Count>0)
            {
                Response.Write(Request.Files[0].FileName.ToString());
            
 

            }

    這個內(nèi)容頁主要包含了一個html的上傳控件,它有一個onchange事件,當事件觸發(fā)后,重載頁面內(nèi)容,完成顯示文件名的過程(無刷新上傳).內(nèi)容頁刷新了,但是對于用戶來說是看不出來的.而且內(nèi)容頁在完成文件上傳的同時,用戶就可以填寫其它相關(guān)信息了,起到了一個同步的作用.

    這種實現(xiàn)方法有優(yōu)點也有缺點:

    優(yōu)點:用戶體驗提高了,節(jié)約了等待時間.
 

    缺點:需要開發(fā)額外的上傳頁面即內(nèi)容頁.

    其實這個方案是否值得采用關(guān)鍵看具體的項目環(huán)境,如果用戶傳的圖片小那也就沒太大的價值.上面的例子只是為了說明基于iframe實現(xiàn)無刷新功能的原理,比較簡單,但要想實現(xiàn)這種無刷新功能的封裝,并非如果簡單,不過都是同樣的原理.

    某次在一開源網(wǎng)站中看到了FileUploadAJAX （http://en.fileuploadajax./）控件,它把一個無刷新上傳的功能封裝成一個控件,調(diào)用非常方便,而且功能也特別多,且非常具有實用性,本人根據(jù)源碼重新封裝了下,并沒有增加功能,只是覺的源碼注釋太少,看起來有點費勁.

    此控件支持如下功能:
   1:多文件上傳.
   2:可以配置最大上傳文件個數(shù).
   3.自定義js腳本.
   4.支持刪除已經(jīng)上傳的文件.
   5.支持無刷新上傳效果(iframe).

   6.可配置相關(guān)提示文本

     此控件是基于iframe方式實現(xiàn)的無刷新,開發(fā)人員并不需要開發(fā)iframe中的內(nèi)容頁,控件采用當前頁來充當iframe的內(nèi)容頁.

Code

    控件屬性IsPosting可以標識是否觸發(fā)上傳事件.只有這種情況下才會觸發(fā)保存文件事件,否則不會影響原頁面的加載 .

    在這里放幾個截圖來供大家參考下:

     初始化頁面后的效果,這里可上傳兩個文件:
 

      當點擊添加上傳控件后:
 

      點擊瀏覽后的效果:
 

     點擊刪除后的效果:

      感興趣的朋友可以去這下載源碼:FileUploadAJAX （http://en.fileuploadajax./）源網(wǎng)站中提供了這個控件詳細的開發(fā)文檔說明.  源碼看起來并不簡單,但實現(xiàn)的原理是非常簡單的,只不過要懂些js基本知識而已. 也可以看我更改后的源碼:更改后的源碼
 

      如果大家對于無刷新上傳還有特別好的辦法,不妨拿出來分享下,最好能夠封裝成控件.