jsp 頭像上傳顯示部分代碼實現

<%@ taglib prefix="tiles" uri="http://tiles.apache.org/tags-tiles"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page contentType="text/html; charset=UTF-8"%>

<div class="container" style="margin-top: 47px;">
    <div class="row">
        <s:form action="headPicChangeDo" method="post" name="operation"
            enctype="multipart/form-data" theme="simple"
            cssClass="form-horizontal">
            <div class="form-group">
                <label class="col-sm-3 control-label">圖片文件</label>
                <div class="col-sm-6">
                    <s:file name="myPic" size="50"
                        cssClass="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">預覽</label>
                <div class="col-sm-6">

                <img id="image"  <s:if
                        test="#session.SESSION_EMPLOYEE.headPic != '' && #session.SESSION_EMPLOYEE.headPic != null"> src="downloadFile.action?fileKey=<s:property value='#session.SESSION_EMPLOYEE.headPic' />" </s:if> width="100" height="100" /><p></p>

                    <%-- <s:if
                        test="#session.SESSION_EMPLOYEE.headPic != '' && #session.SESSION_EMPLOYEE.headPic != null">
                        <img id="headPic" alt="頭像"
                            src="downloadFile.action?fileKey=<s:property value='#session.SESSION_EMPLOYEE.headPic' />"
                            width="100" height="100" class="img-circle" />
                    </s:if>
                    <s:else>
                        <img id="headPic" alt="頭像"
                            src="images/portrait.gif" width="100"
                            height="100" class="img-circle" />
                    </s:else> --%>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-3"></div>
                <div class="col-sm-9">
                    <button type="submit" class="btn btn-primary btn-sm">
                        保 存</button>
                </div>
            </div>
        </s:form>
    </div>
</div>

<script>
    $(function() {
        $('input[type=file]').change(function() {
            var file = this.files[0];
            var reader = new FileReader();
            reader.onload = function() {
                // 經過 reader.result 來訪問生成的 DataURL
                var url = reader.result;
                $("#image").attr('src', url);
            };
            reader.readAsDataURL(file);
        });
    })
</script>