我有一个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();
}
}
答案 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)。