EasyUI的无刷新文件上传

时间:2023-01-27 13:09:44

html界面:

<div class="tablediv deploy_l">
<form id="addWar" action="deploy/addWar" method="post" enctype="multipart/form-data">
<input type="hidden" name="ip" id="hip" value="localhost">
<input type="hidden" name="port" id="hport" value="8080" >
选择要上传的文件:<input type="file" name="attach" id="attach"/><br />
Context 名称:<input type="text" name="context" id="incontext" style="width: 200px;" /><br />
<input type="checkbox" name="update" checked="checked"/>是否更新<br />
<input type="button" class="dpybutn" id="btnAddWar" value="部 署" />
</form>
</div>
......
<div id="loading">
<div class="inputdiv" >
<img class="prtspan span_1" src="images/loading.gif"/>
<h3 class="prtspan span_1" >war包正在上传并部署,请稍候......</h3>
</div>
</div>

js代码:

function messagebox_tip(message){
$.messager.show(
{
title : '系统提示',
msg : message,
showType : 'fade'
}
);
}
//生成上传提示框
function list_loading_generate(){
$('#loading').window({
title:'系统提示',
closable:false,
collapsible:false,
minimizable:false,
maximizable:false,
resizable:false,
modal:true
});
$('#loading').window('close');
}

//部署应用程序
function list_to_deploy_app(){
$("#btnAddWar").click(function(){
$('#loading').window('open');
$('#addWar').form('submit',
{
url:"deploy/addWar",
onSubmit: function(){
$("#hip").val(ip);
$("#hport").val(port);
},
success:function(data){
$('#loading').window('close');
var m_obj = JSON.parse(data);
if(m_obj && m_obj.success == true){
messagebox_tip('war包' + $("#incontext").val() + '部署成功!');
}else{
messagebox_tip('war包' + $("#incontext").val() + '部署失败!\n失败原因是:'+m_obj.message);
}
}
}
);
}
);
}

$(document).ready(
function (){
list_loading_generate();
list_to_deploy_app();
//把表单回车事件弄到部署按钮事件上去
$("#incontext").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#btnAddWar").click();
return false;
}
});
}
);

正在上传中的效果:

EasyUI的无刷新文件上传

上传完后的提示效果:

EasyUI的无刷新文件上传