上传文件进度条进度事件progress

最新推荐文章于 2025-06-21 13:22:46 发布

原创最新推荐文章于 2025-06-21 13:22:46 发布 · 6.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#上传文件 #进度条 #progress #XMLHttpRequestUpload

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用XMLHttpRequest和jQuery实现文件上传进度显示的方法。通过重写XMLHttpRequestUpload对象的onprogress事件，可以实时更新进度条来显示文件上传的状态。

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

在XMLHttpRequest 的open之前重写XMLHttpRequestUpload对象的进度事件progress方法，监听progress方法，计算进度，从而设置进度条。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
	<style>
		.progress {
		    width: 1000px;
		    height: 20px;
		    border: 1px solid #000;
		    margin: 10px;
		}

		.progress > div {
		    width: 0px;     
		    height: 100%;
		    background-color: red;
		}
	</style>
</head>
<body>
	<input type="file" id="file">
	<div class="progress">
	    <div></div>
	</div>
	<button onclick="ajaxUpload()">上传</button>

	<script src="jquery-3.3.1.js"></script>

	<script>
		function ajaxUpload() {
		    var file = $('#file').get(0).files[0];
		    var formdata = new FormData();
		    formdata.append('file', file);
		    $.ajax({
		        url: 'aaa.php',
		        type: 'post',
		        dataType: 'json',
		        data: formdata,
		        processData: false,  //必须设置
		        contentType: false,  //必须设置
		        xhr: () => {
		            var xhr = new XMLHttpRequest();
		            //console.log(xhr);
		            xhr.upload.onprogress = (e) => {
		                console.log(e);
		            	var progressWidth = (e.loaded / e.total) * 100 + '%';
		                $('.progress > div').css('width', progressWidth);
		            }
		            return xhr;
		        }
		    })
		}
	</script>
</body>
</html>

效果如下：
在这里插入图片描述