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

1. HTML代码

<divclass="form-grouprequired"><labelclass="col-sm-3control-label">文件名：</label><divclass="col-sm-6"><inputid="fileName"name="fileName"class="form-control"type="text"><divclass="progress-div"><spanid="progress"></span></div></div><inputid="file-btn"class="btnbtn-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代码

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