作出一個動動態的 progress bar

原生的 JS 方式

在 JavaScript 中，我們可以使用 XMLHttpRequest 物件來上傳檔案並且追蹤上傳進度。以下是一個簡單的範例：

HTML 部分：

<input type="file" id="fileUpload" />
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>

JavaScript 部分：

document.getElementById('fileUpload').addEventListener('change', function(e) {
    var file = e.target.files[0];
    var formData = new FormData();
    formData.append('file', file);

    var xhr = new XMLHttpRequest();

    // 追蹤上傳進度
    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            var percentComplete = (e.loaded / e.total) * 100;
            document.getElementById('progressBar').value = percentComplete;
        }
    };

    // 上傳完成後的處理
    xhr.onload = function() {
        if (xhr.status == 200) {
            alert('上傳成功');
        } else {
            alert('上傳失敗');
        }
    };

    xhr.open('POST', 'your-upload-url', true);
    xhr.send(formData);
});

在這個範例中，我們先是使用 addEventListener 監聽 file input 的 change 事件。當使用者選擇了一個檔案後，我們將該檔案加入到 FormData 物件中，然後使用 XMLHttpRequest 來上傳這個 FormData。

我們使用 xhr.upload.onprogress 來追蹤上傳進度。在這個事件處理器中，我們可以獲取到已經上傳的數據量（e.loaded）以及總數據量（e.total），然後計算出上傳的百分比，並更新 progress bar 的 value。

當上傳完成後，我們可以在 xhr.onload 中進行相應的處理。如果上傳成功，xhr.status 將會是 200，否則就表示上傳失敗。

最後，我們使用 xhr.open 來設定上傳的 URL，並使用 xhr.send 來開始上傳。

使用 RxJS 方式

使用 RxJS 來實現上傳的進度條，我們可以透過監聽 xhr 的 progress 事件來取得上傳進度，然後更新進度條。以下是一個簡單的例子：

首先，我們需要建立一個可以監聽 progress 事件的 Observable：

function createUploadProgressListener(xhr) {
  return new Observable(observer => {
    xhr.upload.onprogress = event => {
      if (event.lengthComputable) {
        observer.next((event.loaded / event.total) * 100); // 發送上傳進度
      }
    };
    xhr.upload.onloadend = () => {
      observer.complete(); // 當上傳完成時，結束 Observable
    };
  });
}

接著，我們在上傳檔案的時候，使用這個 Observable 來更新進度條：

function uploadFile(file) {
  const xhr = new XMLHttpRequest();
  const uploadProgress$ = createUploadProgressListener(xhr);

  xhr.open('POST', '/upload');
  xhr.send(file);

  uploadProgress$.subscribe(progress => {
    console.log(`Upload progress: ${progress}%`);
    // 在這裡更新你的進度條
  });
}

在這個例子中，我們使用了 RxJS 的 Observable 來處理非同步的上傳進度更新。當上傳的進度變化時，我們就會發送一個新的進度值給訂閱者，訂閱者可以在收到新的進度值時更新進度條。當上傳完成時，我們就會結束這個 Observable，這樣訂閱者就知道上傳已經完成，可以做一些清理工作。

注意，這只是一個基本的例子，實際上你可能需要處理更多的情況，例如上傳失敗、取消上傳等等。