拓展：进度条

最新推荐文章于 2025-06-12 17:35:14 发布

meetAlice

最新推荐文章于 2025-06-12 17:35:14 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_42129143/article/details/80865970

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<progress min='0' max='100' value='0'></progress>
	<input type="file" class='tempFile' multiple>
	<button>点我上传</button>
	<script>
	//给按钮添加点击事件
    document.querySelector('button').onclick = function (){
        //因为不确定文件个数，所以用files
    	var files = document.querySelector('.tempFile').files;
    	//将所有文件构建成formdata 用于发送给后台
    	var formdata = new FormData();
    	//遍历所有文件
    	for(var i = 0 ; i < files.length ; i++){
    		var file = files[i];
    		//逐个拼接到formdata里面  效果是myfile1对应的第一个文件，myfile2对应的第二个文件..
    		formdata.append('myfile'+i,file);
    	}
    	//发送ajax请求
    	var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject();
    	xhr.onreadystatechange = function (){
    		if(xhr.readyState == 4){
    			if(xhr.status == 200){
    				console.log(xhr.responseText);
    			}else{
    				console.log(xhr.statusText);
    			}
    		}
    	}
    	// 获得进度条元素progress
    	var progressBar = document.querySelector('progress');
    	//上传文件的进度回调 上传进度一旦改变，自动调用
    	xhr.upload.onprogress = function (eve){
    		//表示文件是否上传到100% 100%之前都为true 加载完成到100%时自动变为false
    		if(eve.lengthComputable){
    			//loaded表示已经上传的  total表示总共需要上传的
    			progressBar.value = (eve.loaded/eve.total)*100;
    		}
    	}
    	//然后发过去
    	xhr.open('post','progress.php',true);
    	xhr.send(formdata);
    }

	</script>
</body>
</html>