下载进度条实现思路

Posted 2021-03-17 liangtao999

html/ajax

var url = "img/01.png";
$.ajax({
    type: ‘GET‘,
    dataType: ‘json‘,
    url: url,
    cache: false,
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function(evt) {
            if(evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total;
                console.log(Math.round(percentComplete * 100) + "%");
            }

        }, false);
        return xhr;
    },
    beforeSend: function() {},
    complete: function() {},
    success: function(result) {}

});

H5+

var url = "";
var options = {method: "GET"};
dtask = plus.downloader.createDownload(url, options);
dtask.addEventListener("statechanged", function(task, status) {
    switch(task.state) {
        case 1: // 开始  
            break;
        case 2: //已连接到服务器  
            break;
        case 3: // 已接收到数据  
            var current = parseInt(100 * task.downloadedSize / task.totalSize);
            console.log(current);
            break;
        case 4: // 下载完成  plus.notification.compProgressNotification("下载完成");//插件调用  
            plus.runtime.install(plus.io.convertLocalFileSystemURL(task.filename), //安装APP  
                {
                    force: true
                },
                function() {

                },
                function() {
                    mui.toast(‘安装失败‘);
                });
            break;
    }
});
dtask.start(); 

uni.app

https://uniapp.dcloud.io/api/request/network-file

未完成待续