当前位置：网站首页>上传文件/文本/图片，盒子阴影

上传文件/文本/图片，盒子阴影

2022-06-26 02:49:00 【小菜鸟码住】

上传文件

<!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>你好</div>
		<input id="file" multiple type="file">
		<button id="btn">上传文件</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('文件格式不对');
//					return;
//				}
//			}
//			alert('上传成功');
		}
		
		
		
		//异步
		//同步
		console.log(1);
		console.log(2);
		alert(3);
		setTimeout(function(){
			console.log(4);
		},3000)
		console.log(5);
	</script>
</html>

在这里插入图片描述

原网站

版权声明
本文为[小菜鸟码住]所创，转载请带上原文链接，感谢
https://blog.csdn.net/hfyldx/article/details/102233491

边栏推荐

猜你喜欢

随机推荐