AJAX傳送和接收Blob物件（案例實戰）

Blob（Binary Large Object）是一種 JavaScript 的資料型別，用於儲存大量的二進位制資料。Blob 物件中儲存的資料沒必要非得是 JavaScript 原生格式資料（或者沒必要是 JavaScript 內部物件），例如，可以是 File 物件，它繼承 Blob 物件，是 Blob 的一個分支或者說是一個子集。

傳送 Blob 物件

在 JavaScript 中，所有 File 物件都是一個 Blob 物件，因此可以通過傳送 Blob 物件的方法來傳送檔案。

【範例】下面範例在頁面中顯示一個“複製檔案”按鈕和一個進度條（progress 元素），單擊“複製按鈕”後，JavaScript 使用當前頁面中所有程式碼建立一個 Blob 物件，然後通過將該 Blob 物件指定為 XMLHttpRequest 物件的 send() 方法的引數值的方法向伺服器端傳送該 Blob 物件，伺服器端接收到該 Blob 物件後將其儲存為一個檔案，檔名為“副本”+ 當前頁面檔案的檔名（包括擴充套件名）。在向伺服器端傳送 Blob 物件的同時，頁面中的進度條將同步顯示傳送進度。

前台頁面

<script>
    window.URL = window.URL || window.webkitURL;
    function uploadDocument () {
        var bb = new Blob ([document.documentElement.outerHTML]);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'test.php?fileName='+getFileName(), true);
        var progressBar = document.getElementById('progress');
        xhr.upload.onprogress = function (e) {
            if (e.lengthComputable) {
                progressBar.value = (e.loaded / e.total) * 100;
                document.getElementById("result").innerHTML='已完成進度：'+progressBar.value+'%';
            }
        }
        xhr.send(bb);
    }
    function getFileName () {  //獲取當前頁面的檔名
        var url = window.location.href;
        var pos = url.lastIndexOf("");
        if (pos == -1)  //pos == -1表示為本地檔案
            pos = url.lastIndexOf("/");  //本地檔案路徑分割符為“/”
        var fileName = url.substring(pos + 1);  //從url中獲得檔名
        return fileName;
    }
</script>
<input type="button" value="複製檔案" onclick="uploadDocument()"><br/>
<progress min="0" max="100" value="0" id="progress"></progress>
<output id="result">

後台頁面

<?php
    $str = file_get_contents('php://input');
    $fileName = '副本_'.$REQUEST['fileName'];
    $fp = fopen (iconv("UTF-8", "GBK", $fileName), 'w');
    fwrite($fp, $str);  //插入第一條資料
    fclose($fp);  //關閉檔案
?>

目前，Chrome 瀏覽器支援在向伺服器端傳送資料時，同步更新進度條 progress 元素中所顯示的進度。

演示效果如下圖所示。

---