javaweb实现上传文件进度条实时显示上传进度 Bootstrap

最新推荐文章于 2024-09-29 13:21:02 发布

奋斗zhe

最新推荐文章于 2024-09-29 13:21:02 发布

阅读量3k

点赞数

文章标签： java 上传进度条展示 bootstrap 文件上传

本文链接：https://blog.csdn.net/weixin_39859160/article/details/96989961

版权

javaweb上传文件进度条实时显示上传进度 Bootstrap

背景：需要上传文件到服务器，但是文件过大或者网速比较慢

需求：在web页面显示文件上传进度条

这里调用bootstrap的进度条做展示

效果如下：
上传进度展示

html代码

通过input选好上传的文件后，点击上传按钮触发进度条监听

<div class="file-input theme-explorer-fas">
	<div class="input-group file-caption-main">
		<div class="file-caption form-control  kv-fileinput-caption" tabindex="500">
			<span class="file-caption-icon"></span>
			<input id="inputNumber" class="file-caption-name " onkeydown="return false;" onpaste="return false;" placeholder="选择 个文件...">
		</div>
		<div class="input-group-btn input-group-append">
			<div tabindex="500" class="btn btn-info btn-file">
				<i class="glyphicon glyphicon-folder-open"></i>&nbsp;  <span class="hidden-xs">选择 …</span>