js实现图片上传预览功能,使用base64编码来实现 

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<style type="text/css">
			#preview,
			.img,
			img {
				width: 200px;
				height: 200px;
			}
			
			#preview {
				border: 1px solid #000;
			}
		</style>
	</head>

	<body>
		<div id="preview"></div>
		<input type="file" onchange="preview(this)" />
		<script type="text/javascript">
			function preview(file) {
				var prevDiv = document.getElementById('preview');
				if(file.files && file.files[0]) {
					var reader = new FileReader();
					reader.onload = function(evt) {
						prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
					}
					reader.readAsDataURL(file.files[0]);
				} else {
					prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
				}
			}
		</script>
	</body>

</html>
posted @ 2019-03-01 11:38  李美玲  阅读(592)  评论(0)    收藏  举报