当前位置: 首页 > article >正文

Ajax实现一个简单的文件上传进度条

Ajax实现一个简单的文件上传进度条功能。

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) + "%");
	}
}

4. 效果图
(这里不贴图了)

.
感谢您的阅读,欢迎参观我的个人网站:小嗨词典【 https://www.happydict.cn】
.

原文地址:https://blog.csdn.net/niceLiuSir/article/details/141905781
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299718.html

相关文章:

  • Python中`enumerate()`函数的作用
  • Imagination推出性能最高且具有高等级功能安全性的汽车GPU IP
  • 搜维尔科技:TechViz 虚拟会议室-多人协同混合现实协作
  • 使用切换 JDK 的方式优化部署微服务占用内存过高的问题
  • 微信小程序中数值计算的精度丢失问题
  • ”CSS 网格“二维布局系统(补充)——WEB开发系列32
  • 深度学习-目标检测(二)Fast R-CNN
  • HCIA--实验十:路由的递归特性
  • 【C++】STL——vector中的迭代器失效问题
  • 【Kubernetes】常见面试题汇总(八)
  • @antv/x6 限制节点或者子节点的移动范围
  • git的使用和gdb工具
  • Xilinx系FPGA学习笔记(六)RAM的IP核学习
  • uni-app实现web-view和App之间的相互通信
  • BRAS介绍
  • tio websocket 客户端 java 代码 工具类
  • 编译u-boot报错configuration written to .config
  • CCS12.2 以及以上版本如何使用C2000ware 4.03版本,发现直接导入工程不能正确识别地址变量?
  • openssl+keepalived安装部署
  • 基于Java+SpringBoot+Vue+MySQL的美容美发管理系统