原生JavaScript文件上传带进度条

276 阅读1分钟

支持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>

服务器配置事项