layui 上傳文件_批量導(dǎo)入數(shù)據(jù)UI的方法
使用layui的文件上傳組件,可以方便的彈出文件上傳界面。
效果如下:
點(diǎn)擊【批量導(dǎo)入】按鈕調(diào)用js腳本importData(config)就可以實(shí)現(xiàn)數(shù)據(jù)上傳到服務(wù)器。
腳本:
/*** * 批量導(dǎo)入 * config.downUrl 下載模板url * config.uploadUrl 上傳文件url * config.msg * config.done 上傳結(jié)束后執(zhí)行。 */ function importData(config){ var default_config = { msg:"數(shù)據(jù)導(dǎo)入成功!" } $.extend( default_config, config); var idRandom = "importData" + Math.ceil(Math.random()*10000) var htmlContent = '<div class="layui-upload-drag" id="'+idRandom+'">'; htmlContent += '<i class="layui-icon"></i>'; htmlContent += '<p>點(diǎn)擊上傳,或?qū)⑽募献У酱颂?lt;/p>'; htmlContent += '</div>'; layer.open({ type: 1 ,offset: "auto" //具體配置參考:http://www.layui.com/doc/modules/layer.html#offset ,id: 'layer_importData' //防止重復(fù)彈出 ,title:'導(dǎo)入記錄' ,content: htmlContent ,maxWidth:800 ,btn: ['下載模板'] ,btnAlign: 'c' //按鈕居中 ,shade: 0 //不顯示遮罩 ,yes: function(){//提交 var iframe = $("<iframe></iframe>"); iframe.attr("src",default_config.downUrl); iframe.css("display","none"); $("#"+idRandom).append(iframe); } }); form.render(); //拖拽上傳 upload.render({ elem: "#"+idRandom ,url: default_config.uploadUrl ,accept: 'file' ,done: function(data){ if(data.code == 0){ layer.closeAll(); if($("#query")){ $("#query").click(); } if(default_config.done){ default_config.done(data); }else{ layer.msg(default_config.msg); } }else{ layer.msg(data.msg); } } }); }
以上這篇layui 上傳文件_批量導(dǎo)入數(shù)據(jù)UI的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07javascript中不易分清的slice,splice和split三個(gè)函數(shù)
這篇文章主要為大家詳細(xì)介紹了javascript中不易分清的slice,splice和split三個(gè)函數(shù),感興趣的小伙伴們可以參考一下2016-03-03身份證號(hào)碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載
身份證號(hào)碼前六位所代表的省,市,區(qū), 以及地區(qū)編碼下載...2007-04-04微信小程序入口場(chǎng)景的問題集合與相關(guān)解決方法
這篇文章主要介紹了微信小程序入口場(chǎng)景的問題集合與相關(guān)解決方法,從零開始開發(fā)一個(gè)小程序,大多數(shù)坑點(diǎn)都是在微信小程序的各個(gè)入口場(chǎng)景處。所以這里整理一下微信小程序的各個(gè)入口場(chǎng)景會(huì)面臨的問題以及解決方案,需要的朋友可以參考下2019-06-06JS基于clipBoard.js插件實(shí)現(xiàn)剪切、復(fù)制、粘貼
這篇文章主要介紹了JS實(shí)現(xiàn)剪切、復(fù)制、粘貼——clipBoard.js 的相關(guān)資料,需要的朋友可以參考下2016-05-05