上传文件-进度条设置

在Ajax的异步请求中添加xhr可以读取上传文件的总大小和已上传的大小,如下代码

$.ajax({
    url: prefix+'/upload',
    type: 'POST',
    contentType: false,
    data: formData,
    processData: false,
    xhr: function(){
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress',function(e) {
                if (e.lengthComputable) {
                    var percent = Math.floor(e.loaded/e.total*100);
                    if(percent <= 100) {
                        $("#J_progress_bar").attr('aria-valuenow', percent);
                        $("#J_progress_bar").css('width', percent+"%");
                        $("#J_progress_bar").html(percent+'%');
                    }
                    if(percent >= 100) {
                        // $("#J_progress_label").html('文件上传完毕,请等待...');
                        // $("#J_progress_label").addClass('success');
                    }
                }
            }, false);
        }
        return myXhr;
    },
    success: function(data) {
        if(data.code == 0) {
            $.modal.msgSuccess("上传成功");
            setTimeout(clearProcess,3000)
        }
        else{
            $.modal.msgError(data.msg);
            //清除进度条
            clearProcess();
        }
    },
    error: function(error) {
        console.log(error);
        $.modal.msgError("上传失败,出现异常");
        //清除进度条
        clearProcess();
    }
});

版权声明:本文为weixin_42269031原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。