HTML提交文件，并且预览

最新推荐文章于 2024-03-18 22:27:15 发布

Bowen_Yang

最新推荐文章于 2024-03-18 22:27:15 发布

阅读量1k

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_39627843/article/details/104236471

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

主要是JavaScript部分吧，用到了Filereader，记录下代码，免得日后忘记

<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<title>Just a Test</title>
		<script src="plugin/jquery-3.1.1.min.js"></script>
		
		
		<script>
			function getFileContent(){
				var reader = new FileReader();
				
				var files = document.getElementById("fileInput").files;
				reader.readAsDataURL(files[0]);	/*这里只有一个文件*/
				
				/*当文件读取完成后*/
				reader.onload=function(){
					/*显示图片*/
					document.getElementById("imgShower").src = reader.result;
				}
			}
		</script>		   	
   	
</head>		
<body>
		<form action="#">
			<input type="file" onchange="getFileContent()" id="fileInput"/>
			<img src="" id="imgShower">
			<input type="submit" value="提交" />
		</form>
</body>
</html>