您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

form表单中,file选择图片后预览

前言

代码

<!DOCTYPE html>
<html lang="zh" >
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	.preview-item {width:400px;height:300px;overflow:hidden;}
	</style>
</head>
<body class="white-bg">
	<input type="file" name="avatar" id="inputImage" accept="image/*" onchange="change()" multiple />
	<div id="previewContainer"></div>

<script type="text/javascript">
function change() {
	var inputImage = document.getElementById("inputImage");
	var files = inputImage.files;
	
	var previewContainer = document.getElementById("previewContainer");
	while(previewContainer.hasChildNodes()){ previewContainer.removeChild(previewContainer.firstChild); }
	for (var i = 0; i < files.length; i++) {
		var file = files[i];
		var imageType = /^image\//;
		
		if (!imageType.test(file.type)) {
		  continue;
		}

		var img = document.createElement("img");
		img.classList.add("preview-item");
		img.file = file;
		previewContainer.appendChild(img); // previewContainer是用来预览图片的div

		var reader = new FileReader();
		reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
		reader.readAsDataURL(file);
	}
}
</script>
</body>
</html>

在这里插入图片描述

参考

在web应用程序中使用文件


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进