怎么接收layui上传的文件_layui 上传文件_批量导入数据UI的方法

使用layui的文件上传组件，可以方便的弹出文件上传界面。

效果如下：

点击【批量导入】按钮调用js脚本importData(config)就可以实现数据上传到服务器。

脚本：

/***

* 批量导入

* config.downUrl 下载模板url

* config.uploadUrl 上传文件url

* config.msg

* config.done 上传结束后执行。

*/

function importData(config){

var default_config = {

msg:"数据导入成功！"

}

$.extend( default_config, config);

var idRandom = "importData" + Math.ceil(Math.random()*10000)

var htmlContent = '

';

htmlContent += '';

htmlContent += '

点击上传，或将文件拖拽到此处

';

htmlContent += '

';

layer.open({

type: 1

,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset

,id: 'layer_importData' //防止重复弹出

,title:'导入记录'

,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 上传文件_批量导入数据UI的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。