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

最新推荐文章于 2021-12-27 00:28:23 发布

小菜鸟码住

最新推荐文章于 2021-12-27 00:28:23 发布

阅读量77

点赞数

分类专栏： h5知识

本文链接：https://blog.csdn.net/hfyldx/article/details/102233491

版权

h5知识专栏收录该内容

19 篇文章 0 订阅

订阅专栏

上传文件

<!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>

在这里插入图片描述

小菜鸟码住

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
上传文件/文本/图片，盒子阴影

上传文件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 1px solid b...
复制链接

扫一扫