Grails g:uploadForm重定向

时间:2014-06-14 21:51:05

标签: jquery grails

我有一个g:uploadForm出现在模态对话框中。 在我提交g:uploadForm后,它开始上传我的文件,但在完成之后,它会尝试转到upload.jsp并且找不到它。我想要的是模式对话框在文件上传完成后不要关闭。我怎样才能抑制表格出现的模态的关闭。我认为真正的问题是,一旦文件上传,我怎么能压制浏览器寻找upload.jsp。相反,我希望它保留在用于浏览然后上传文件的模态上。

以下是上传表单:

<g:uploadForm class = "uploaderForm" action="upload">
                    <div id = "fileType">
                        <p><u>File Type</u></p>
                        <label for="excelFile">Excel:</label><g:radio id = "excelFile" name="fileTypegrp" value="1" checked="true"/><br>
                        <label for="textFile">Text File(delimited):</label><g:radio id = "textFile" name="fileTypegrp" value="2" disabled="true"/><br>
                        <label for="xmlFile">XML:</label><g:radio id = "xmlfile" name="fileTypegrp" value="3" disabled="true"/>
                    </div>
                    <div id = "dataType">
                        <p><u>Data Type</u></p>
                        <label for="accData">Account Data:</label><g:radio id = "accData" name="dataTypegrp" value="1"/><br>
                        <label for="entData">Entity Data:</label><g:radio id = "entData" name="dataTypegrp" value="2"/><br>
                        <label for="indData">Individual Data:</label><g:radio id = "indData" name="dataTypegrp" value="3"/><br>
                    </div>  
                    <div id = "uploaderfield">
                        <input id = "chseFile" type="file" name="file"/><br>
                        <button id = "submFile" type="button">Upload</button>
                        <button id = "cancel1" class = "close" type="button"> Cancel </button>
                    </div>
                    <div id ="uploadErrors"><div id="progressbar"><div class="progress-label" style ="color: black;">Loading...</div></div></div>
                </g:uploadForm>

这里是提交它的按钮的javascript:

$("#submFile").click(function () {
    if ($("#chseFile").val() == "") {
        $("#uploadErrors").html("<span class='text'>You must select a file to upload.</span>");
        $("#uploadErrors").show();
        $("#uploadErrors .text").fadeOut(3000);
        }
    else if (getCheckedValue(document.getElementsByName('dataTypegrp')) == "") {
        $("#uploadErrors").html("<span class='text'>You must select a data type to upload.</span>");
        $("#uploadErrors").show();
        $("#uploadErrors .text").fadeOut(3000);
    }
    else {
        $("#progressbar").show();
        $("#progressbar").progressbar({
            value: false,
            change: function() {
                $(".progress-label").text( $("#uploadErrors").progressbar( "value" ) + "%" );
            },
            complete: function() {
                $(".progress-label").text( "Complete!" );
            }
        });
        $(".uploaderForm").submit();
}
}

1 个答案:

答案 0 :(得分:1)

为了使用模式中的g:uploadForm来完成此操作,您需要实现将表单发布到iframe

这很简单。只需在模式/页面中添加iframe,然后在target上设置form以匹配iframe的名称。例如:

<g:uploadForm name="someForm" 
    controller="myController" 
    action="saveUpload 
    class="form-horizontal" 
    role="form" 
    target="hidden-upload-frame">
...
</g:uploadForm>
...
<iframe id="hidden-upload-frame" 
    name="hidden-upload-frame" 
    style="display: none;">
</iframe>

如果您需要页面/模式对正在上传的文件作出反应,那么controller可以将其呈现给iframe(例如javascript / jquery)。