简单易用的进度条基于HTML5实现

最新推荐文章于 2025-01-02 15:09:38 发布

飞鸟jiang

最新推荐文章于 2025-01-02 15:09:38 发布

阅读量2.1k

点赞数 1

分类专栏： web前端文章标签： html5 进度条 jQuery

本文链接：https://blog.youkuaiyun.com/u012882577/article/details/51536387

版权

web前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单图片上传功能，并通过动态调整宽度来显示上传进度条。此示例展示了如何设置HTML表单以便进行多文件上传，同时利用jQuery动画效果来模拟上传进度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
	.jdtbox {
		padding: 10px 0;
	}
	
	.jdt_dbg {
		background: #fce5e5;
		width: 196px;
		height: 18px;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		overflow: hidden;
		border-top: 1px solid #f9d1d1;
	}
	
	.jdt_mbg {
		background: #f12938;
		height: 18px;
		width: 75%;
		height: 20px;
	}
</style>

<script type="text/javascript">
	$(function() {
		$(".jdt_mbg").animate({
			width : "50%",
		}, 1000);
	});
</script>
<body>

	<form action="http://192.168.1.106:8080/app/img/multiUpload" method="post" enctype="multipart/form-data" name="upload_form">
		<label>选择图片文件</label> 
		<input name="imgFile" type="file" multiple="multiple" accept="image/gif, image/jpeg" /> 
		<input name="upload" type="submit" value="上传" />
	</form>

	<div class="jdtbox">
		<div class="jdt_dbg">
			<div class="jdt_mbg" style="width: ${investDetail.percent*100"></div>
		</div>
	</div>
</body>
</html>