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的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JS簡(jiǎn)單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法
這篇文章主要介紹了JS簡(jiǎn)單生成隨機(jī)數(shù)(隨機(jī)密碼)的方法,簡(jiǎn)單分析了javascript隨機(jī)數(shù)相關(guān)函數(shù)并結(jié)合具體實(shí)例形式分析了隨機(jī)數(shù)的相關(guān)生成技巧,需要的朋友可以參考下2017-05-05
微信小程序?qū)崿F(xiàn)側(cè)邊導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊導(dǎo)航欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07
JS+JSP通過(guò)img標(biāo)簽調(diào)用實(shí)現(xiàn)靜態(tài)頁(yè)面訪問(wèn)次數(shù)統(tǒng)計(jì)的方法
這篇文章主要介紹了JS+JSP通過(guò)img標(biāo)簽調(diào)用實(shí)現(xiàn)靜態(tài)頁(yè)面訪問(wèn)次數(shù)統(tǒng)計(jì)的方法,基于JavaScript動(dòng)態(tài)調(diào)用jsp頁(yè)面通過(guò)對(duì)TXT文本文件的讀寫(xiě)實(shí)現(xiàn)統(tǒng)計(jì)訪問(wèn)次數(shù)的功能,需要的朋友可以參考下2015-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07
獲取數(shù)組中最大最小值方法js代碼(自寫(xiě))
經(jīng)搜索獲取數(shù)組中最大最小值的方法實(shí)在是太多了,不過(guò)大同小異,本文自寫(xiě)了一個(gè),有需要的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08
解決wx.onMenuShareTimeline出現(xiàn)的問(wèn)題
本文主要介紹解決wx.onMenuShareTimeline出現(xiàn)的問(wèn)題,這里提供了示例代碼作為參考,有需要的小伙伴可以參考下2016-08-08
詳解javascript 正則表達(dá)式之分組與前瞻匹配
本文主要講解javascript 的正則表達(dá)式中的分組匹配與前瞻匹配的,需要對(duì)正則的有基本認(rèn)識(shí),本人一直對(duì)兩種匹配模棱不清,還有不清楚的朋友跟隨腳本之家小編一起看看吧2018-05-05
詳解JavaScript如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Promise對(duì)象
Promise對(duì)象的作用將異步操作以同步操作的流程表達(dá)出來(lái),避免層層嵌套的回調(diào)函數(shù),而且Promise提供了統(tǒng)一的接口,使得控制異步操作更加容易。本文介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Promise對(duì)象,需要的可以參考一下2022-11-11
bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
這篇文章主要介紹了bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-02-02
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識(shí)點(diǎn)。本節(jié)介紹webpack如何優(yōu)化前端性能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08

