Ajax实现文件上传进度条功能示例代码

本示例使用 原生 AJAX + FormData 实现带进度条的文件上传功能，无需依赖第三方插件。通过监听xhr.upload上传进度事件，实时计算并展示上传百分比，同时支持文件格式、大小校验、上传成功 / 失败状态提示、上传中止等能力。代码结构简单、兼容性良好，适用于网页表单附件、图片、文档上传等场景，可直接集成到各类 Web 项目中。

1. HTML代码

<div class="form-group required">
    <label class="col-sm-3 control-label">文件名：</label>
    <div class="col-sm-6">
        <input id="fileName" name="fileName" class="form-control" type="text">
        <div class="progress-div">
            <span id="progress"></span>
        </div>
    </div>
    <input id="file-btn" class="btn btn-warning" type="button" value="上传文件" onclick="$('input[id=rel_file]').click()">
</div>

2. CSS样式

.progress-div{
    width: 100%;
    height: 20px;
    background-color: #ffffff;
}
#progress{
    height: 20px;
    background-color: #1d9e7d;
    display: inline-block;
}

3. js代码

function save() {
    $('#submitBtn').attr('disabled',true);
    parent.layer.msg("正在上传，请稍后 ...");
    var data = new FormData($('#DatumForm')[0]);
    var url = irsCtxPath + "/biz/datumSave/upload";
    doUpload(data, url, uploadSuccess, 'progress');
    $('#submitBtn').attr('disabled',false);
}
// 上传成功后的回调函数
function uploadSuccess(data) {
    if (data.code == 0) {
        parent.layer.msg("操作成功");
        parent.reLoad();
        var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
        parent.layer.close(index);
    } else {
        parent.layer.alert(data.msg);
    }
}
// 上传
function doUpload(data, url, callBack, progressId) {
    $.ajax({
        url: url,
        type: "POST",
        data: data,
        xhr: function(){ //获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ //检查upload属性是否存在
                //绑定progress事件的回调函数
                myXhr.upload.addEventListener('progress',function(e) {progressHandlingFunction(e, '#' + progressId)}, false);
            }
            return myXhr; //xhr对象返回给jQuery使用
        },
        success : function(data) {
            callBack(data);
        },
        processData:false,
        contentType:false
    });
}
//上传进度回调函数：
function progressHandlingFunction(e, progressId) {
    if (e.lengthComputable) {
        $(progressId).attr({value : e.loaded, max : e.total}); //更新数据到进度条
        var percent = e.loaded/e.total*100;
        if (percent < 100) {
            $(progressId).html(" 正在努力上传中，已完成 " + percent.toFixed(2) + "%");
        } else {
            $(progressId).html(" 已完成 ");
        }
        $(progressId).css('width', percent.toFixed(2) + "%");
    }
}