JavaScript

超轻量级php框架startmvc

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

更新时间:2020-07-11 04:42:01 作者:startmvc
//放于上传前functionajaxLoading(){$("<divclass=\"datagrid-mask\"></div>").css({display:"block",width:"1


//放于上传前
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 上传文件