上傳在Ionic的進度

我有一個窗體，用戶可以在其中添加信息和添加圖像。圖像是base64編碼的，所以一切都存儲在json對象中。該對象在用戶提交時發送到服務器（使用$resource）。上傳在Ionic的進度

如果用戶例如增加了3個圖像約每幅圖像2MB，有一個像邊一個低劣的連接，並希望把它上傳它好像它永遠服用。用戶只看到$ionicLoading覆蓋圖，而沒有信息需要多長時間或已上傳多少％。

用戶體驗糟糕，因爲用戶可能會認爲應用程序凍結或處於無限循環狀態，並且這只是一個糟糕的應用程序。

我有以下想法，但不知道他們是否可能或

是否有棱有角，科爾多瓦或離子，以獲得browserinformation的方式多少％已上傳？
有沒有辦法獲得當前的上傳速度？我可以通過獲取我的stringified JSON對象的length來得到我的對象的大小，將它除以1024以獲得kB。然後，我會檢查當前uploadSpeed每秒，並將當前的上傳速度添加到一個變量。有了這些信息，我可以計算上傳的％大約
JQuery ajaxForm插件？

來源

2015-08-27 Mazz

聽起來像你正在尋找的是從XHR2進度事件。

假設你的服務器所處理XHR2並返回內容的長度，在普通的JavaScript：

function upload(blobOrFile) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('POST', '/server', true); 
    xhr.onload = function(e) { ... }; 

    // Listen to the upload progress. 
    var progressBar = document.querySelector('progress'); 
    xhr.upload.onprogress = function(e) { 
    if (e.lengthComputable) { 
     progressBar.value = (e.loaded/e.total) * 100; 
     progressBar.textContent = progressBar.value; // Fallback for unsupported browsers. 
    } 
    }; 

    xhr.send(blobOrFile); 
} 

upload(new Blob(['hello world'], {type: 'text/plain'}));

上傳速度也可計算使用進度事件返回的信息，像你描述。

至於在AngularJS/Ionic中的這個實現，看起來這是一個長期的issue在$ http並不真正支持進度事件的框架內。

我見過使用爲此編寫的特殊angular directive的實現，或者甚至使用jQuery file upload實現。

來源

2015-08-27 14:05:06 tabrindle

工程非常好！將它與$ q.defer（）結合起來，並在xhr.onreadystatechange狀態更改爲4事件時解決它，因此我不得不更改代碼中的任何內容。謝謝 – Mazz

上傳在Ionic的進度

回答

相關問題