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 实现表单验证功能
Jul 05 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery 实现DOM元素拖拽交换位置的实例代码
Jul 14 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python聊天程序实例代码分享
2013/11/18 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python用字典构建多级菜单功能
2019/07/11 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python list和str互转的实现示例
2020/11/16 Python
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
酒店管理求职信范文
2014/04/06 职场文书
家长对老师的评语
2014/04/18 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书