input上传图片

最新推荐文章于 2024-07-25 10:33:27 发布

M_SSY

最新推荐文章于 2024-07-25 10:33:27 发布

阅读量396

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/M_SSY/article/details/80505495

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			.file {
				width: 75px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				background-color: green;
				position: relative;
				color: #fff;
			}
			
			.file input {
				width: 75px;
				height: 25px;
				opacity: 0;
				filter: alpha(opacity=0);
				position: absolute;
				left: 0;
				top: 0;
			}
			#dd{
				width: 300px;
				height: 300px;
			}
			#dd img{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<form action="" name="file" class="file">
			上传文件
			<input type="file" id="img" name="img">
		</form>
		<div id="dd"></div>
		<script>
			var file = document.getElementById("img");
			file.onchange = function() { // 文本框内容改变时触发
				var files = this.files; // 获取文件的数量
				for(var i = 0; i < files.length; i++) {
					readers(files[i]);
				}
			}
			
			function readers(fil) {
				console.log(fil);
				var reader = new FileReader(); // 异步读取存储在用户计算机上的文件
				reader.readAsDataURL(fil); // 开始读取指定的Blob对象或File对象中的内容
				reader.onload = function() {
					document.getElementById("dd").innerHTML += "<img src='" + reader.result + "'>"; // 添加图片到指定容器中
					console.log(reader.result);
				};
			}
			
		</script>
	</body>
</html>