HTML提交文件，并且预览

最新推荐文章于 2023-01-30 11:52:45 发布

VIP文章 Bowen_Yang

最新推荐文章于 2023-01-30 11:52:45 发布

阅读量945

点赞数

分类专栏：前端学习

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

版权

主要是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>

优惠劵

Bowen_Yang

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML提交文件，并且预览

主要是JavaScript部分吧，用到了Filereader，记录下代码，免得日后忘记<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Just a Test</title> <script src="plugin/jquery...
复制链接

扫一扫