图片上传之前显示缩略图

说一下我的大致思路，首先监听form表单里面的file类型的input框，把上传的图片转成base64,然后把这个base64赋值给一个img标签的src,这样图片就可以预览出来了，接着就是调整的显示图片大小了。具体步骤请看图：

1.画一个form表单，里面有一个input，并且input的类型是file, 然后下面有一个img的标签，用于承接转换之后的base64的值，显示图片的预览。

				<div style="clear: left;padding-top: 22px;">
					<a href="#" onclick="oad.click();"><img src="${ctx}/images/error/sui1-so.jpg" style="height:auto;width:112px"/></a>
				</div>
				<div>
					<input class="tempPath" name="imgClassName" type="text" id="filepath" readonly="readonly" placeholder="请选择您所需上传的图片" />
					<input class="upload_01" name="uploads" value="" id="oad" onchange="checkpic('oad');" type="file" multiple="multiple" style="visibility: hidden" /> 
				</div>
				<img id="img0" name="img1" width="160px" height="180px" src="" />

2.写监听file的js方法,给img的src赋值，显示图片预览

	//监听file
	$("#headPortraitUpload").on("change",headPortraitListener);
	/*监听方法*/
	function headPortraitListener(e) {
		var img = document.getElementById('img0');
		if(window.FileReader) {
			var file  = e.target.files[0];
			var reader = new FileReader();
			if (file && file.type.match('image.*')) {
				reader.readAsDataURL(file);//转换成base64
			} else {
				img.css('display', 'none');
				img.attr('src', '');
			}
			reader.onloadend = function (e) {
				img.setAttribute('src', reader.result);//图片读取完成之后把base64的赋值给img的src
			}
		}
	}

3.