1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <input type="file" name="file" id="file" />
 </body>
 <script>
	 $('#file').change(function(event) {
		// 根据这个 <input> 获取文件的 HTML5 js 对象
		var files = event.target.files;
		if (files && files.length > 0) {
			// 获取目前上传的文件
			file = files[0];
			// 来在控制台看看到底这个对象是什么
			console.log(file);
			// 那么我们可以做一下诸如文件大小校验的动作
			if(file.size > 1024 * 64) {
				alert('图片大小不能超过 64kB!');
				return false;
			}
			// 下面是关键的关键，通过这个 file 对象生成一个可用的图像 URL
			// 获取 window 的 URL 工具
			var URL = window.URL || window.webkitURL;
			// 通过 file 生成目标 url
			var imgURL = URL.createObjectURL(file);
			// 用这个 URL 产生一个 <img> 将其显示出来
			$("#imghead" ).attr("src", imgURL);
		}
	});
 </script>
</html>