使用layui的文件上傳組件，可以方便的彈出文件上傳界面。

效果如下：

點擊【批量導(dǎo)入】按鈕調(diào)用js腳本importData(config)就可以實現(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 = '

';

htmlContent += '';

htmlContent += '

點擊上傳，或?qū)⑽募献У酱颂?/p>';

htmlContent += '

';

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.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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。