当前位置：网站首页>Upload file / text / picture, box shadow

Upload file / text / picture, box shadow

2022-06-26 03:22:00 【Small vegetable bird yard live】

Upload files 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 1px solid  black;
				box-shadow: 3px 3px 3px 3px;
				font-size: 30px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div> Hello </div>
		<input id="file" multiple type="file">
		<button id="btn"> Upload files </button>
		<ul id="msg">
			<li></li>
			<li></li>
		</ul>
	</body>
	<script>
//		var file = document.querySelector('#file');
		var file = document.getElementById('file');
		var btn = document.getElementById('btn');
		var msg = document.getElementById('msg');
		btn.onclick = function(){
			var reader = new FileReader();
			reader.readAsText(file.files[0]);
//			reader.readAsDataURL(file.files[0]);
			reader.onload = function(){
				console.log(this.result)
//				msg.children[0].innerHTML = '<img src=''>'
			}
//			msg.children[0].innerHTML = file.files[0].name;
//			console.log(file.files);
//			for(var i=0;i<file.files.length;i++){
//				if(!/image/.test(file.files[i].type)){
//				if(file.files[i].type.indexOf('image')===-1){
//					alert(' The file format is not correct ');
//					return;
//				}
//			}
//			alert(' Upload successful ');
		}
		
		
		
		// asynchronous 
		// Sync 
		console.log(1);
		console.log(2);
		alert(3);
		setTimeout(function(){
			console.log(4);
		},3000)
		console.log(5);
	</script>
</html>

Insert picture description here

原网站

版权声明
本文为[Small vegetable bird yard live]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/177/202206260249289290.html

边栏推荐

猜你喜欢

随机推荐