【EasuUi】基于EasuUi下载文件进度条展示

1、css样式。

 /*---圆环进度条--*/
 .circlefile {position:absolute;height:100px;width:100px;border-radius:50%;background:#77909D;margin-top: -113%;margin-left: -178%;}
 .pie-rightfile,.pie-leftfile {position:absolute;top:0;left:0;height:100px;width:100px;border-radius:50%;}
 .rightfile,.leftfile {position:absolute;top:0;left:0;height:100px;width:100px;border-radius:50%;background:#DDDDDD;}
 .pie-rightfile,.rightfile {clip:rect(0,auto,auto,50px);}
 .pie-leftfile,.leftfile {clip:rect(0,50px,auto,0);}
 .maskfile {position:absolute;top:25px;left:25px;height:50px;width:50px;background:#fff;border-radius:50%;text-align:center;}
 .maskfile-num {position:absolute;top:50%;left:50%;font-size:15px;transform: translate(-50%, -50%);}
 .maskfile-span-num{font-size:15px;}

2、javascript方法。

/**
* 取消加载层
*/
function dispageload() {  
     $(".datagrid-mask").remove();  
     $(".datagrid-mask-msg").remove();  
 }

 /**
 *  加载层
 */
 function pageLoadDownFile() {
     var html = "<div class=\"circlefile\"><div class=\"pie-rightfile\"><div class=\"rightfile\"></div></div><div class=\"pie-leftfile\"><div class=\"leftfile\"></div></div><div class=\"maskfile\"><div class=\"maskfile-num\"><span class=\"maskfile-span-num\">0</span>%</div></div></div>";
     $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", "z-index": "10000", height: $(window).height() }).appendTo("body");
     $("<div style=\"display: none\" class=\"datagrid-mask-msg\"></div>").html(html).appendTo("body").css({ display: "block", "z-index": "10000", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
 }

 /**
 *  圆环进度(小)
 */
 var _changeFileProcess = function (value) {
     $('.maskfile span').html(value);
     var num = value * 3.6;
     if (num < 180) {
         $('.rightfile').css('transform', 'rotate(' + num + 'deg)');
     } else {
         $('.rightfile').css('transform', 'rotate(180deg)');
         $('.leftfile').css('transform', 'rotate(' + (num - 180) + 'deg)');
     };
 };

 /**
 * 下载文件进度条。$.ajaxDownFile({ url: 'xxxx', data: { dm: 'dmxx' }, success: function () { xx(); } });
 * url:下载地址;data:传入参数(非必填);success:成功后处理事件。例如：是否删除文件方法(非必填);
 */
 jQuery.ajaxDownFile = function (option) {
     if (typeof option === 'undefined') return false;
     if (typeof option.pageloading === 'function') { option.pageloading(); } else { pageLoadDownFile(); }
     var xhr = new XMLHttpRequest();
     xhr.addEventListener('progress', getDownProgressHandler, false);
     xhr.open('POST', option.url, true);
     xhr.responseType = "blob";
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
             var filename = '';
             if (typeof option.filename === 'undefined') {
                 var reqHeader = xhr.getResponseHeader('Content-Disposition');
                 if (reqHeader) {
                     option.filename = reqHeader.split(';')[1].split('filename=')[1];
                 }
             }
             filename = option.filename;
             if (typeof window.chrome !== 'undefined') {
                 var a_link = document.createElement('a');
                 var url = window.URL.createObjectURL(xhr.response);
                 a_link.href = url;
                 a_link.download = filename;
                 a_link.click();
                 window.URL.revokeObjectURL(url);
             }
             else if (typeof window.navigator.msSaveBlob !== 'undefined') {
                 var blob = new Blob([xhr.response], { type: 'application/force-download' });
                 window.navigator.msSaveBlob(blob, filename);
             } else {
                 var file = new File([xhr.response], filename, { type: 'application/force-download' });
                 window.open(URL.createObjectURL(file));
             }
             dispageload();
         }
     }
     function getDownProgressHandler(event, position, total, percentComplete) {
         if (event.lengthComputable) {
             var _proNum = Math.round((event.loaded / event.total) * 100);
             _changeFileProcess(_proNum);
             if (_proNum >= 100) {
                 if (typeof option.success === 'function') {
                     option.success();
                 }
             }
         } else {
             dispageload();
         }
     }
     var datastr = '';
     if (typeof option.data !== 'undefined') {
         datastr = JSON.stringify(option.data);
     }
     xhr.setRequestHeader('Content-Type', 'application/json');
     xhr.send(datastr);
 }

3、效果显示。

$.messager.alert('提示', '压缩成功，点击确定下载。', 'infoxx', function () {
                $.ajaxDownFile({ url: 'downfiles', data: { dm: dm }, filename: '附件.zip', success: function () { getDelDownFile(); } });
            });

function getDelDownFile() {
        $.ajax({
            type: 'post',
            url: 'deldownfiles',
            dataType: "json",
            data: {},
            cache: true,
            success: function (data) {
                dispageload();
            },
            error: function (e) {
                var msg = responseTextTitle(e.responseText);
                $.messager.alert("提示", msg, "error");
            }
        });
    }