ajax FormData实现带进度条文件上传

最新推荐文章于 2020-12-22 16:05:17 发布

中资上事

最新推荐文章于 2020-12-22 16:05:17 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： formdata ajax实现带进度条文件上传

本文链接：https://blog.csdn.net/zht_123/article/details/90144937

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#out{
			width:300px;
			height:20px;
			border:1px solid #ccc;
			margin:5px 0px;
		}
		#in{
			width:0%;
			height:20px;
			background-color: #090;
		}
	</style>
</head>
<body>
	
	<form action="" id='frm'>
		头像: <input type="file" name='face'><br>
		<div id='out'><div id='in'></div></div>
		<input type="button" value="上传" id='btn'>
	</form>
	<script>
		window.onload=function(){
			document.getElementById('btn').onclick=function(){
				var frm=document.getElementById('frm');
				var formdata=new FormData(frm);
				var xhr=new XMLHttpRequest();
				xhr.open('post','demo.php');
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4 && xhr.status==200){
						if(xhr.responseText){
							alert('上传成功');
						}else{
							alert('上传失败');
						}
					}
				};

				//设置onprogress事件，当上传正在进行的时候
				xhr.upload.onprogress=function(e){
					var total=e.total; //文件总大小
					var loaded=e.loaded;//已经上传的文件大小
					var per=Math.floor(loaded/total*100)+'%';
					var oDiv=document.getElementById('in');
					oDiv.style.width=per;
					oDiv.innerHTML=per;
				};
				xhr.send(formdata);
			};
		};
	</script>
	

</body>
</html>

demo.php

<?php
$path=uniqid('',true).strrchr($_FILES['face']['name'],'.');
echo move_uploaded_file($_FILES['face']['tmp_name'],$path)?1:0;

小结
使用FormData上传文件不需要设置表单的enctype属性。因为FormData会将表单所有的数据收集后一起提交。
为了可以测试，在php.ini中设置上传最大值

post_max_size = 1024M               最大上传大小
upload_max_filesize = 1024M             上传附件大小限制

步骤：

1、创建FormData对象，收集表单上传的信息

2、创建AJAX对象

3、AJAX发送FormData对象

4、每隔100毫秒计算一下已经上传的百分比

中资上事

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ajax FormData实现带进度条文件上传

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #out{ width:300px; height:20px; border:1px solid ...
复制链接

扫一扫