JQuery實現上傳圖片並預覽

 前段頁面代碼：

<div id="popUps" class="control-group" style="display: block">
	<label class="control-label">身份證正面：</label>
		<div class="controls">
			<input id="popUpsUrl" type="file" name="files" accept="image/*" onchange="uploadImg(this)">
			<br>
			<img id="popUpImg" src="" width="350px" height="623px">
		</div>
	</div>
	<div id="adBanner" class="control-group" style="display: block">
		<label class="control-label">身份證背面：</label>
		<div class="controls">
			<input id="adBannerUrl" type="file" name="files" accept="image/*" onchange="uploadImg(this)">
			<br>
			<img id="adBannerImg" src="" width="350px" height="49px">
	</div>
</div>

function uploadImg(file) {
	if (!file.files || !file.files[0]) {
		return;
	}
	var reader = new FileReader();
	reader.onload = function (evt) {
		if (file.id === 'popUpsUrl') {
		    document.getElementById('popUpImg').src = evt.target.result;
		    image = evt.target.result;
		} else if (file.id === 'popUpsUrl2') {
		    document.getElementById('popUpImg2').src = evt.target.result;
		    image = evt.target.result;
		}
	};
	reader.readAsDataURL(file.files[0]);
}

上面的方法是比較笨的一種，也是容易想到的一種方法。還可以用下一種方法實現：

function uploadImg(file) {
	if (!file.files || !file.files[0]) {
		return;
	}
	var reader = new FileReader();
	reader.onload = function (evt) {
	    image = evt.target.result;
            $("#"+file.id).parent().find("img").attr("src",image);
	};
	reader.readAsDataURL(file.files[0]);
}