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>
  • 相关阅读:
    【JS】DOM
    【JS】事件处理
    【JS】引用类型之Global
    【JS】引用类型之RegExp
    【JS】引用类型之Function
    树形图(菜单)构建组建dhtmlXTree
    【JS】引用类型之String
    【JS】引用类型之Math
    【JS】鼠标事件
    【JS】UI事件
  • 原文地址:https://www.cnblogs.com/geniussoft/p/6224993.html
Copyright © 2011-2022 走看看