HTML5图片预览

两种方式实现

URL
FileReader

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<title>html5 图片上传预览</title>
	<style>
		#preview {
			width: 300px;
			height: 300px;
			overflow: hidden;
		}
		#preview img {
			width: 100%;
			height: 100%;
		}
	</style>
	<script src="../jquery/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		function preview1(file) {
			var img = new Image(), url = img.src = URL.createObjectURL(file)
			var $img = $(img)
			img.onload = function() {
				URL.revokeObjectURL(url)
				$('#preview').empty().append($img)
			}
		}
		function preview2(file) {
			var reader = new FileReader()
			reader.onload = function(e) {
				var $img = $('<img>').attr("src", e.target.result)
				$('#preview').empty().append($img)
			}
			reader.readAsDataURL(file)
		}
		
		$(function() {
			$('[type=file]').change(function(e) {
				var file = e.target.files[0]
				preview1(file)
			})
		})
	</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
	<input type="file" name="imageUpload"/>
	<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>

URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。

Snandy

HTML5图片预览

导航

公告