jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復(fù)上傳文件】

更新時(shí)間：2018年05月26日 10:27:12 作者：紫薇帝星的故事

點(diǎn)擊一次上傳, 當(dāng)上傳操作結(jié)束后才能操作界面，實(shí)現(xiàn)方式是通過 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("正在上傳，請(qǐng)稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});  
 }  

//放于狀態(tài)返回后
 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:'用戶導(dǎo)入成功！',
          timeout:5000,
          showType:'slide'
        });
      }
      $('#table).datagrid('reload');
      return;
    },
    error: function(data, status, e) { //提交失敗自動(dòng)執(zhí)行的處理函數(shù)。
      ajaxLoadEnd();
      if(data&&data.message){
        $.messager.alert("警告",data.message);
      }else{
        $.messager.alert("警告","導(dǎo)入失敗，請(qǐng)聯(lián)系相關(guān)人員");
      }
    }
  });
}

導(dǎo)入控件

<input type="file" id="importFile" name="importFile" />
    <a class="easyui-linkbutton" onclick="import()">批量導(dǎo)入用戶</a>

效果就是點(diǎn)擊一次上傳, 當(dāng)上傳操作結(jié)束后才能操作界面

總結(jié)

以上所述是小編給大家介紹的jquery ajaxfileuplod 上傳文件 essyui laoding 效果【防止重復(fù)上傳文件】，希望對(duì)大家有所幫助如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

相關(guān)文章

Jquery實(shí)現(xiàn)自定義tooltip示例代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)自定義tooltip的方法,需要的朋友可以參考下
2014-02-02
jQuery動(dòng)畫效果圖片輪播特效
這篇文章主要介紹了jQuery動(dòng)畫效果圖片輪播特效，圖片可以進(jìn)行左右輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-01-01
jquery網(wǎng)頁(yè)回到頂部效果(圖標(biāo)漸隱,自寫)
當(dāng)網(wǎng)頁(yè)內(nèi)容草雞多的時(shí)候，用戶就需要有個(gè)按鈕快速回到頂部，于是用js來實(shí)現(xiàn)下，畫布多說，直接上代碼
2014-06-06
從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別
這篇文章主要介紹了從重置input file標(biāo)簽中看jQuery的 .val() 和 .attr(“value”) 區(qū)別的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
20個(gè)非常棒的 jQuery 幻燈片插件和教程分享
jQuery 是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇，它可以幫助你在項(xiàng)目中加入一些非常好的效果。
2011-08-08
jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能示例
這篇文章主要介紹了jquery UI實(shí)現(xiàn)autocomplete在獲取焦點(diǎn)時(shí)得到顯示列表功能,結(jié)合實(shí)例形式分析了jquery UI實(shí)現(xiàn)autocomplete事件響應(yīng)及顯示下拉列表功能操作技巧,需要的朋友可以參考下
2019-06-06
jQuery中的類名選擇器（.class）用法簡(jiǎn)單示例
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡(jiǎn)單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡(jiǎn)單使用方法,需要的朋友可以參考下
2018-05-05
jQuery實(shí)現(xiàn)的文字hover顏色漸變效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的文字hover顏色漸變效果,以完整實(shí)例形式分析了jQuery實(shí)現(xiàn)文字顏色漸變效果的相關(guān)技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以參考下
2016-02-02
JQueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫QueryMiniUI按照時(shí)間進(jìn)行查詢的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-06-06
jQuery中過濾器的基本用法示例
這篇文章主要介紹了jQuery中過濾器的基本用法,結(jié)合簡(jiǎn)單實(shí)例形式分析了jQuery過濾器針對(duì)table表格元素屬性進(jìn)行判斷與設(shè)置的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10