html多文件上传、显示进度条、显示文件大小

var file = $('#fileId');
        file.on('change', function( e ){
            //获取上传文件数量
            var fileNumber = e.currentTarget.files.length;
            for(var fi = 0;fi<fileNumber;fi++){
            // e.currentTarget.files.each(function(index, el) {
            //  
                var file = this.files[fi]; 
                //判断是否为图片
                if(/image\/\w+/.test(file.type)){ 
                    // alert();
                    var aim = $('.qygkpt-ut-filelist-img');        
                    var html = "";
                    var name = e.currentTarget.files[fi].name;
                    var reader = new FileReader(); 
                    reader.readAsDataURL(file); 
                    // reader.onload = function(e){ 
                        // result.innerHTML = '<img src="'+this.result+'" alt=""/>' ;
                        html += '<li class="qygkpt-ut-filelist-i-box fl"> <a href="javascript:;" class="qygkpt-ut-filelist-i-b-remove"></a> <img src="'+this.result+'" width="100" height="100" alt="上传文件" /> </li>' ;
                    // } 
                    aim.append(html);
                    

                }else{
                    
                    var aim = $('.qygkpt-ut-filelist-file');        
                    var name = e.currentTarget.files[fi].name;
                    var fileSize = (e.currentTarget.files[fi].size /1024) /1024;
                    var myDate = new Date(),
                        hours = myDate.getHours(),
                        minutes = myDate.getMinutes(),
                        Milliseconds = myDate.getMilliseconds(),
                        loadBoxId = fi+hours.toString()+minutes.toString()+Milliseconds.toString();
                    var html = '<li class="qygkpt-ut-filelist-f-obj"> <span>'+name+'<span class="pl10">('+fileSize.toFixed(2)+'M)</span></span> <span class="qygkpt-ut-filelist-f-o-load"><span class="qygkpt-ut-filelist-f-o-l-child" id="file'+loadBoxId+'" style="width:0;"></span></span> <a href="javascript:;" class="start-btn">删除</a> </li>';
                    aim.append(html);

                    var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");


                    var file = e.currentTarget.files[fi];   
                    var total = file.size; 
                    if(window.FileReader) {   
                        var fr = new FileReader();   
                        fr.onprogress = function(e) { 
                            // $(".progress1").show();  
                            // $("#Progress").val((e.loaded/total)*100) 
                            // console.log((e.loaded/total)*100);
                            console.log(loadBoxId);
                                 
                            $('#file'+loadBoxId).width((e.loaded/total)*100);
                        };   
                        fr.onabort=function () {   
                             minDialogAlert(name+"文件上传中断,请重试");  
                            $('#file'+loadBoxId).parent().parent().remove();
                        };   
                        fr.onerror=function () {   
                             minDialogAlert(name+"文件上传出错，请重试");   
                            $('#file'+loadBoxId).parent().parent().remove();
                        };   
                        fr.onload=function () { $(".progress1").hide();   
                             minDialogAlert(name+"文件上传成功，请知悉；");   
                        };   
                        
                        fr.readAsDataURL(file);   
                    }   
                }
            }
            
        });