在视图页面上传照片

时间:2012-07-25 06:03:03

标签: grails

在我的视图页面上传一张应该是指定尺寸的照片:护照尺寸照片。请提前帮助我。提前付款

1 个答案:

答案 0 :(得分:1)

我的观点是

<div id="resultAvatar" class="message">
    <g:if test="${msg != null}">
        ${msg}
    </g:if>
    <g:else>
        <g:message code="profile.avatar.upload.info" />
    </g:else>
</div>
<div id="warnAvatar" class="warning" style="display:none;"></div>
<br />
<g:form name="avatarForm" id="avatarForm"
    controller="profile" action="saveAvatar"
    update="resultAvatar" enctype="multipart/form-data">

<style type="text/css">
    div.fileinputs {
        position: relative;
        width: 70%;
        text-align: right;
    }
    div.fakefile {
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 1;
        width: 148px;
    }
    div.fakefile input[type=button] {
        /* enough width to completely overlap the real hidden file control */
        cursor: pointer;
        width: 148px;
    }
    div.fileinputs input.file {
        position: relative;
        -moz-opacity:0 ;
        filter:alpha(opacity: 0);
        opacity: 0;
        z-index: 2;
    }
</style>        
    <table style="width:100%;"><tr>
        <td style="pading:40px">
            <div class="fileinputs">
                <input type="file" class="file" name="avatar" id="avatarBox" style="width:100%">
                <div class="fakefile">
                    <input type="button" value="Selecciona" />
                </div>
            </div>
        </td>
        <td>
            <a href="#" onclick="checkExt();return false;"
            class="botverde3"
            >Cargar</a>
        </td>
    </tr></table>

    <%--ti:multiFile id="avatarBox" name="avatar"/--%>
    <input id="submitAvatar" style="display:none;" type="submit" />
</g:form>
<g:javascript>

function checkExt(){
    var ext = $('#avatarBox').val().split('.').pop().toLowerCase();
    if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
        $('#warnAvatar').html('Extensión de fichero no admitida, solo se permiten archivos .gif, .png, .jpg y .jpeg');
        $('#warnAvatar').show();
    }else{
        var submitBtn = $('#submitAvatar');
        submitBtn.click();
    }
}
</g:javascript>

在控制器端

@Secured(['ROLE_USER'])
def saveAvatar = {
    def errors
    def user = theInitService.loggedUser()
    def hasFiles = fileService.hasFiles(request,'avatar')

    if(hasFiles) {
        errors = saveAvatar(request)
    }
    if(errors.equals("true")){
        render(template:"avatarUploadForm", model:[msg: 'There was a problem, try to upload it later.'])
    }else{
        render(template:"avatarUploadForm", model:[msg: 'The avatar was correctly saved.'])
    }
}

private String saveAvatar(request) {
    //println("save avatar for bean")
    def files = fileService.saveAvatarForBean(request)

    return files
}

saveAvatarForBean只是一个你必须保存的Java文件,有很多关于它的文档。我认为最不同的部分是Grails如何管理多部分文件和表单。

这里有一个用于执行该操作的原因代码

http://ashokabhat.wordpress.com/2012/01/08/save-bytes-image-in-the-application-server-using-java/

希望它有所帮助! :)