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 = '' ;
                        html += '
  • +this.result+'" width="100" height="100" alt="上传文件" />
  • '
    ; // } 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 = '
  • '+name+'('+fileSize.toFixed(2)+'M) +loadBoxId+'" style="width:0;"> 删除
  • '
    ; 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); } } } });

    你可能感兴趣的:(javascript)