原生JavaScript文件上传带进度条

最新推荐文章于 2021-02-03 08:10:52 发布

weixin_33851177

最新推荐文章于 2021-02-03 08:10:52 发布

阅读量105

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/fellowtraveler/blog/717630

版权

2019独角兽企业重金招聘Python工程师标准>>>

支持ie9及以上的大多数主流浏览器的文件上传。

如果想支持多文件上传，需要自己修改formdata的值

<!DOCTYPE html>
<html>
<head>
	<title>upload file</title>
</head>
<body>
<input id="upload-file" type="file">
<button id="upload-button">上传</button>
</body>
<script type="text/javascript">
	document.getElementById('upload-button').onclick = function(){
		var formData = new FormData();
		var $ajax = new XMLHttpRequest();
		if(!document.getElementById('upload-file').files[0]){
			alert('no files');
			return;
		}
		formData.append('files',document.getElementById('upload-file').files[0]);
		$ajax.open('post','http://localhost:8888/fsslr-webserver/ad/fileCenter/uploadFile',true);
		$ajax.upload.onprogress = function(evt){
			console.log(Math.round(evt.loaded * 100 / evt.total));
		}
		$ajax.send(formData);
		$ajax.onreadystatechange = function (){
			if($ajax.readyState == 4){
				if($ajax.status == 200){
					alert($ajax.responseText);
					return $ajax.responseText;
				}else{
					return "访问服务器出现错误";
				}
			}
		}

	};
</script>
</html>

转载于:https://my.oschina.net/fellowtraveler/blog/717630