zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    坐标系和投影
    BizTalk使用SQL适配器获取数据(上)创建解决方案及业务流程
    BizTalk使用SQL适配器获取数据(下)部署解决方案
    internet信息服务(IIS)管理器 快捷键
    卡巴斯基7.0离线更新升级包病毒库
    BizTalk 安装、配置、软硬件要求及功能
    诺顿病毒库离线升级
    ORACLE学习笔记性能优化5
    ORACLE学习笔记性能优化7
    ORACLE学习笔记性能优化4
  • 原文地址:https://www.cnblogs.com/geniussoft/p/6224993.html
Copyright © 2011-2022 走看看