js實現文件下載顯示進度條（js 文件上傳進度）

本文目錄一覽：

• 1、js高手處理網站每頁載入時顯示進度條
• 2、文件下載如何使用進度條？
• 3、關於js或jquery進度條實現？
• 4、JS程序 圖片（即進度條）載入
• 5、JS做的進度條，如何做的？
• 6、自己用php做了一個文件下載器，如何在點擊「下載後」按鈕顯示一個進度條

js高手處理網站每頁載入時顯示進度條

這個很難實現的，因為要想實現準確的進度條，就必須知道要下載的總位元組數和當前已下載的位元組數，總位元組數除了html文件本身，還有裡面的各種對象如圖片、動畫、css文件、js文件等的位元組數，還要區分哪些是從電腦的cache取出的，哪些是從伺服器下載的，有些數據要等到頁面完全下載完畢才能得到，這馬後炮有什麼用呢。IE瀏覽器本身的進度條都無法做到準確呢，何況用JS？

一般都是用個動態GIF圖片或Falsh循環滾動一下糊弄糊弄用戶就行了。我還沒見過能精確計算出載入進度的網站，如果有，那我只能說他們糊弄的技術很牛B

文件下載如何使用進度條？

在VS2005下使用webclient是可以使用進度條的。

方式是使用DownloadProgressChanged來實現

使進度條的value=e.ProgressPercentage

這樣就可以了。

還有，這個方式得使用非同步下載。

關於js或jquery進度條實現？

寫一個div定義寬高，下面鋪一個背景圖片，作為進度條為空的情況。

再在div內部加添加一個img圖片，這個圖片要可以左右延展的。然後用JavaScript動態控制圖片的寬度即可，實現進度展現。

JS程序 圖片（即進度條）載入

ajax默認情況下是非同步執行的（建議盡量非同步），也就是說當發出ajax命令後，程序是不停頓的，如果這時候隱藏圖片，那麼就相當於沒有顯示了（瀏覽器可能來不及把圖片顯示出來就被你隱藏了）。所以，標準做法是在ajax的回調函數中進行圖片的隱藏（建議用complete事件），比如：

var loading=document.getElementById(“loading”);

loading.style.display=”block”;  //盡量不要通過設為空白來顯示圖片，兼容性差

ajax({

    //…其他參數略

    success:…

    fail:…

    complete:function(){

        loading.style.display=”none”;   //在這裡隱藏！

    }

});

JS做的進度條，如何做的？

js其實是沒法計算到網頁的載入進度的。

目前見到的打開頁面顯示進度的有兩種

1、如果是flash做的，那是flash自身的載入進度。

2、如果是js做的，做法比較簡單，就是在頁面的不同的地方插入script標籤，動態改變進度的值。     

html

    head

        script

        var processPer = 0;

        window.onload = function(){

            document.getElementById(‘process’).innerHTML = processPer;

        }

        /script

    /head

    body

        div id=”process”/div

        div/div

        ….

        script

        processPer = 30;

        document.getElementById(‘process’).innerHTML = processPer;

        /script

        div/div

        ….

        div/div

        ….

        script

        processPer = 100;

        document.getElementById(‘process’).innerHTML = processPer;

        /script

    /body

/html

類似這樣的，就可以實現了進度的動態改變。

自己用php做了一個文件下載器，如何在點擊「下載後」按鈕顯示一個進度條

如果確實想精確的處理下載進度條的話，兩種方案：

第一種是需要用socket保持與客戶端通信，返回已下載的數據大小，然後可以顯示下載速度，以及進度條之類。

第二種是php與flash交互，顯示進度條。

否則的可以顯示一個模擬進度條，如果滿足需求的話。