Question

我正在使用自定义ajax多文件上传器，我遇到了一个麻烦。

我的想法是：

创建自定义多文件输入，样式化为bootstrap [done]
通过ajax [done]
执行进度条，显示已上传的字节数[已完成]
获取当前文件的名称[NOT]

我对最后一点有疑问。我不知道如何获取当前上传的文件名。请帮忙。

关于jsfiddle的工作示例： https://jsfiddle.net/darxide/s5yuy1ur/3/

$(document).on('click' , '.pseudo-file' , function() {
    $(this)
        .parent()
        .find('input[type=file]')
        .click()
})

$(document).on('change' , 'input[type=file]' , function() {

    var files = $('input[type=file]').prop("files")
    var names = ''
    var list = $.map(files , function(val) {
        return val.name; 
    })

    for(var i = 0;i<list.length;i++){
        names += list[i] + ', '
    }

    $(this)
        .parent()
        .parent()
        .find('.pseudo-label span')
        .text(names)
})

$(document).on('click' , '.pseudo-upload' , function() {
    upload_files()
})


function upload_files()
{
    var data = new FormData();
    $.each($('#file input')[0].files, function(i, file) {
        data.append(i, file)
    })

    $('.pseudo-progress').addClass('pseudo-progress-in')
    $('.pseudo-label span').addClass('opacity-out')

    $.ajax({
        url:'/echo/json/',
        data: data,
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            }
            return myXhr;
        },        
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){

            //doSuccess(['done huehue'])
            $('.pseudo-progress').removeClass('pseudo-progress-in')
            $('.pseudo-label span').removeClass('opacity-out')            
            $('#file input').val("")
            $('.pseudo-label span').text('upload complete')
            $('.pseudo-progress .progress-bar').css({width:'0%'})
        },
        fail : function(){
            //doAlert(['very fail huehue'])
            $('.pseudo-progress').removeClass('pseudo-progress-in')            
            $('.pseudo-label span').removeClass('opacity-out')            
            $('.pseudo-progress .progress-bar').css({width:'0%'})            
        }        
    })
}

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('.pseudo-progress .progress-bar').css({
            width : (e.loaded / e.total *100) + '%'
        })
        $('.pseudo-progress .progress-bar').text(sizeHumanized(e.loaded , true) + '/' + sizeHumanized(e.total , true))
    }
}

function sizeHumanized(bytes, si) {
    var thresh = si ? 1000 : 1024;
    if(Math.abs(bytes) < thresh) {
        return bytes + ' B';
    }
    var units = si
        ? ['kB','MB','GB','TB','PB','EB','ZB','YB']
        : ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
    var u = -1;
    do {
        bytes /= thresh;
        ++u;
    } while(Math.abs(bytes) >= thresh && u < units.length - 1);
    return bytes.toFixed(1)+' '+units[u];
}

Ajax多文件上传 - 获取当前文件的名称

0 个答案: