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


Posted in jQuery onMay 26, 2018
//放于上传前
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 效果【防止重复上传文件】

总结

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

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery常用选择器详解
Jul 17 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
20个最常见的jQuery面试问题及答案
May 23 #jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 #jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 #jQuery
jQuery获取随机颜色的实例代码
May 21 #jQuery
You might like
咖啡常见的种类
2021/03/03 新手入门
用PHP实现多级树型菜单
2006/10/09 PHP
php格式化工具Beautify PHP小小BUG
2008/04/24 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
请解释virtual关键字的含义
2015/06/17 面试题
.NET面试问题集
2015/12/08 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
毕业证丢失证明
2014/01/15 职场文书
总经理岗位职责描述
2014/02/08 职场文书
小学生演讲稿大全
2014/04/25 职场文书
法学求职信
2014/06/22 职场文书
学生安全责任书模板
2014/07/25 职场文书
关于远足的感想
2015/08/10 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL