js实现上传图片及时预览

上传前：

选择图片后：

公司前辈已经写好的。稍微修改拿来用。现在记录一下。

jsp:

<input type="hidden" name="xxxVO.logoPath" id="imgFileFullPath" value='<s:property value="xxxVO.logoPath"/>'>
<div class="">
								<h4>logo图片</h4>
							</div>
							<div class="" id="picId" title="点击选择图片" οnclick="$('#fileId').click();">
								<s:if test="xxxVO.logoPath!=null&&xxxVO.logoPath!=''">
									<img width="300px" id="preview" height="125px" src='<%=path%>/<s:property value="xxxVO.logoPath"/>'>
								</s:if>
								<s:else>
									<img src="<%=path%>/img/addimg.jpg" />
								</s:else>
							</div>
							<input hidden="true" id="fileId" type="file" οnchange="javascript:setImagePreview();" name="imgFile" accept="image/*" />
							<input type="hidden" id="imgFileName" name="imgFileName" />

js:

//图片
		function setImagePreview() {
			document.getElementById("imgFileName").value = document
					.getElementById("fileId").value;
			var docObj = document.getElementById("fileId");
			var picDivHtml = " ";
			// 更改失败，显示原有的图片
			var logoPath = $("#imgFileFullPath").val();
			if (logoPath && logoPath != '') {
				picDivHtml = '<img width="300px" id="preview" height="125px" src="' +  logoPath + '">';
			}

			if (docObj.files && docObj.files[0]) {
				//计算文件大小 
				var size = Math.floor(docObj.files[0].size / 1024);
				if (size > 2 * 1024) {
					alert("文件限制最大为2M");
				} else {
					picDivHtml = '<img width="300px" height="125px" id="preview" src="'
							+ window.URL.createObjectURL(docObj.files[0])
							+ '">';
				}
			}

			document.getElementById("picId").innerHTML = picDivHtml;
			return true;
		}