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

 更新时间:2018年05月26日 10:27:12   作者:紫薇帝星的故事  
点击一次上传, 当上传操作结束后才能操作界面,实现方式是通过 ajaxfileuplod 上传文件,需要的朋友参考下吧

//放于上传前
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的each方法使用示例分享

    jquery的each方法使用示例分享

    each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理,jQuery和jQuery对象都实现了该方法,下面是使用方法
    2014-03-03
  • 详解闭包解决jQuery中AJAX的外部变量问题

    详解闭包解决jQuery中AJAX的外部变量问题

    这篇文章主要介绍了详解闭包解决jQuery中AJAX的外部变量问题的相关资料,需要的朋友可以参考下
    2017-02-02
  • jQuery文件上传控件 Uploadify 详解

    jQuery文件上传控件 Uploadify 详解

    本文主要介绍jQuery文件上传控件 Uploadify的用法,原作者做了非常详细的备注,有需要的朋友可以参考一下。
    2016-06-06
  • jQuery图片轮播插件——前端开发必看

    jQuery图片轮播插件——前端开发必看

    这篇文章主要介绍了jQuery图片轮播插件代码的相关资料,在各大网站都可以简单图片轮播效果,非常实用,需要的朋友可以参考下
    2016-05-05
  • jQuery常用数据处理方法小结

    jQuery常用数据处理方法小结

    这篇文章主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • jQuery学习笔记之jQuery的DOM操作

    jQuery学习笔记之jQuery的DOM操作

    jQuery学习笔记之jQuery的DOM操作实现方法, 学习jquery与dom操作的朋友可以参考下。
    2010-12-12
  • jQuery Layer弹出层传值到父页面的实现代码

    jQuery Layer弹出层传值到父页面的实现代码

    这篇文章主要介绍了jQuery Layer弹出层传值到父页面的实现代码,需要的朋友可以参考下
    2017-08-08
  • jquery 交替为表格添加样式的代码

    jquery 交替为表格添加样式的代码

    学习了jquery,发现其功能真的很令我惊讶,为表格添加背景色用css也可以实现,却不得不在<tr>标签里一行一行地添加,但用jquery只需四行代码,就是这样精简的用法,让我对jquery产生了极大的兴趣,也不得不惊叹新兴的技术所带来的效率!
    2010-01-01
  • jQuery实现TAB选项卡切换特效简单演示

    jQuery实现TAB选项卡切换特效简单演示

    这篇文章主要为大家详细介绍了jQuery实现TAB选项卡切换特效简单演示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jQuery 表单序列化实例代码

    jQuery 表单序列化实例代码

    这篇文章主要介绍了jQuery 表单序列化实例代码,需要的朋友可以参考下
    2017-06-06

最新评论