EasyUI filebox文件上傳前預覽

CSS：

#previewHeadImage{width:160px;height:160px;text-align:center;display:flex;justify-content:center;align-items:center;margin:10px;background-color:#CCC;border-radius:5px;overflow:hidden;margin-left:100px;}
#previewHeadImage img{max-width:160px;max-height:160px;}

HTML：

<div id="chioseImageDialog" class="easyui-dialog" title="上傳用戶頭像文件"
        data-options="resizable:false,modal:true,closed:true,buttons: [{
                text:'確定',
                handler:uploadImage
            },{
                text:'取消',
                handler:function(){
                    $('#chioseImageDialog').dialog('close');
                }
            }]" style="width:380px;height:380px">
        <div class="easyui-layout" data-options="fit:true">
            <div data-options="region:'north',title:'',split:false,headerCls:'classTitle'" style="height:25px;background-color:#F7F7F7">
                <form id="uploadImageForm" method="post" enctype="multipart/form-data" action="uploadhead.jsp">
                    <input name="userID" id="userID" type="hidden" value="<%=currentUser.getProperty("ID")%>"/>
                    <input class="easyui-filebox" name="imageFile" id="imageFile" style="width:100%" />
                </form>
            </div>            
            <div data-options="region:'center',title:'頭像效果預覽'" border="false" fit="true" style="text-align:center">            	
                <div id="previewHeadImage">
                	
                </div>
            </div>
            <div data-options="region:'south'" style="padding:5px">
                <p>1、系統支持(jpg|gif|png)格式圖片。</p>
                <p>2、建議頭像圖片尺寸爲<span color="#990000">160*160，大小不超過1MB</span>。 </p>
            </div>
        </div>
    </div>

JS：

function uploadHead()
{		
	$('#imageFile').filebox({
		accept:'image/*',
		buttonText:'瀏覽...',
		prompt:'請選擇頭像文件...',
		onChange:function(newValue, oldValue){
			var files = $(this).next().find('input[type=file]')[0].files;
			if(files && files[0])
			{
				var reader = new FileReader();
				reader.onload = function(evt) {
					$("#previewHeadImage").html('<img src="' + evt.target.result + '"/>');
				}
				reader.readAsDataURL(files[0]);
			}			
		}
	});
	$("#previewHeadImage").html('<img src="' + $("#userheadimg").attr("src") + '"/>');
	$('#chioseImageDialog').dialog('open');	
}

調用示例：

<a href="javascript:void(0);" class="easyui-linkbutton" data-options="plain:true" onClick="javascript:uploadHead();">上傳頭像</a>