您的位置：首页 > Web前端 > JQuery

jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

2018-05-26 10:27 746 查看

//放于上传前
function ajaxLoading(){
$("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("正在上传，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
}
//放于状态返回后
function ajaxLoadEnd(){
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
function import(){
ajaxLoading();
$.ajaxFileUpload({
url:'import.do',
fileElementId:'importFile',
type:'post',
dataType : 'json',
secureuri : false,
success:function(data){
ajaxLoadEnd();
if(data&&data.code=="200"){
$.messager.show({
title:'提示',
msg:'用户导入成功！',
timeout:5000,
showType:'slide'
});
}
$('#table).datagrid('reload');
return;
},
error: function(data, status, e) { //提交失败自动执行的处理函数。
ajaxLoadEnd();
if(data&&data.message){
$.messager.alert("警告",data.message);
}else{
$.messager.alert("警告","导入失败，请联系相关人员");
}
}
});
}

导入控件

<input type="file" id="importFile" name="importFile" />
<a class="easyui-linkbutton" onclick="import()">批量导入用户</a>

效果就是点击一次上传, 当上传操作结束后才能操作界面

总结

以上所述是小编给大家介绍的jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】，希望对大家有所帮助如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajaxfileuplod 上传文件 jquery ajax

相关文章推荐

新的分享

章节导航