HTML提交文件,并且预览

主要是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.οnlοad=function(){
					/*显示图片*/
					document.getElementById("imgShower").src = reader.result;
				}
			}
		</script>		   	
   	
</head>		
<body>
		<form action="#">
			<input type="file" οnchange="getFileContent()" id="fileInput"/>
			<img src="" id="imgShower">
			<input type="submit" value="提交" />
		</form>
</body>
</html>

 

发布了80 篇原创文章 · 获赞 126 · 访问量 9万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览