About the effect of jquery ajaxfileuplod uploading files essyui laoding

这篇文章主要介绍了关于jquery ajaxfileuplod 上传文件 essyui laoding的效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

//放于上传前
function ajaxLoading(){  
  $("<p class=\"datagrid-mask\"></p>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");  
  $("<p class=\"datagrid-mask-msg\"></p>").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:&#39;import.do&#39;,
    fileElementId:&#39;importFile&#39;,
    type:&#39;post&#39;,
    dataType : &#39;json&#39;,
    secureuri : false,
    success:function(data){
      ajaxLoadEnd();
      if(data&&data.code=="200"){
        $.messager.show({
          title:&#39;提示&#39;,
          msg:&#39;用户导入成功！&#39;,
          timeout:5000,
          showType:&#39;slide&#39;
        });
      }
      $(&#39;#table).datagrid(&#39;reload&#39;);
      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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

基于jQuery 实现bootstrapValidator下的全局验证

jsonp跨域请求数据实现手机号码查询的方法

The above is the detailed content of About the effect of jquery ajaxfileuplod uploading files essyui laoding. For more information, please follow other related articles on the PHP Chinese website!