用HTML5实现文件上传带进度条

最新推荐文章于 2026-05-12 05:53:54 发布

原创最新推荐文章于 2026-05-12 05:53:54 发布 · 5.3k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#HTML5

该博客详细介绍了如何使用HTML5的File API来创建一个带有进度条的文件上传功能，提供了一种提升用户体验的方法。

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Text1文件上传</title>
		<style>
			*{
				margin: 0;
			}
			.progress{
				width: 200px;
				height: 20px;
				background: #ddd;
				position: relative;
			}
			.info{
				width:0px;
				height: 20px;
				background: #ec5710;
				position: absolute;
				left: 0;
				top: 0;
			}
			
		</style>
		<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
	</head>
	<body style="margin: 50px;">
		<input type="file" id="file" name="file" />
		
		<div class="progress">
			<div class="info" id="info">
			</div>
		</div>
		
		<div id="result">
			
		</div>
		
		<input type="submit" id="btn" />
		
		
		<script>
			var oFlie = document.getElementById("file")
			var oBtn = document.getElementById("btn")
			var oRes = document.getElementById("result")
			var oImg = document.getElementsByTagName("img")
			var oInfo = document.getElementById("info")
			oBtn.onclick = function(){
				
				var fs = oFlie.files[0]
				var reader = new FileReader(fs)
				
				
				reader.onprogress = function(e){
					
					oInfo.style.width= e.loaded/e.total*200+"px"
					oRes.innerHTML = Math.round((e.loaded/e.total*200)*0.5)+"%"
				}
				
				reader.onload = function(){

					var data = new FormData()
					data.append("file",fs)
					

					$.ajax({
						type:"post",
						url:"api/test.php",
						async:true,
						data:{
							data:data
						},
						processData:false,
						contentType:false,
						success:function(res){
							console.log(res)
						}
					});
					
					
				}
				
				
				reader.readAsDataURL(fs)
				
			}
			
		</script>
	</body>
</html>