• 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>
  • 相关阅读:
    Why use strong named assemblies?
    Dependency Walker
    “等一下,我碰!”——常见的2D碰撞检测
    MOBA游戏的网络同步技术
    VS2017如何配置openGL环境
    UE4关于Oculus Rift (VR)开发忠告
    UE4 的json读写方式
    Blueprint 编译概述
    UE4编码规范
    Unreal Enginer4特性介绍
  • 原文地址:https://www.cnblogs.com/geniussoft/p/6224993.html
Copyright © 2020-2023  润新知