使用layui的文件上传组件,可以方便的弹出文件上传界面。
效果如下:
点击【批量导入】按钮调用js脚本importData(配置)就可以实现数据上传到服务器。
<强>脚本:
/* * *
*批量导入
*配置。downUrl下载模板url
*配置。uploadUrl上传文件url
* config.msg
*配置。做上传结束后执行。
*/函数importData(配置){
var default_config={
味精:“数据导入成功!”
}
美元。扩展(default_config配置);
var idRandom=" importData " + Math.ceil (math . random () * 10000)
var htmlContent=' & lt; div类=" layui-upload-drag " id=" + idRandom +”祝辞的;
htmlContent +='';
htmlContent +=' & lt; p>点击上传,或将文件拖拽到此处& lt;/p>”;
htmlContent +=& lt;/div>;
layer.open ({
类型:1
抵消:“汽车”//具体配置参考:http://www.layui.com/doc/modules/layer.html偏移量
id:“layer_importData”//防止重复弹出
标题:“导入记录的
内容:htmlContent
maxWidth: 800
btn:['下载模板”)//按btnAlign:“c”钮居中
阴影:0//不显示遮罩
,是的:函数(){//提交
var iframe=$ (“& lt; iframe> & lt;/iframe>”);
iframe.attr (“src”, default_config.downUrl);
iframe.css(“显示”,“没有一个”);
$ (" # " + idRandom) .append (iframe);
}
});
form.render ();//拖拽上传
upload.render ({
elem:“#”+ idRandom
url: default_config.uploadUrl
接受:“文件”
完成:功能(数据){
如果(数据)。代码==0){
layer.closeAll ();
如果($(" #查询")){
$(" #查询”).click ();
}
如果(default_config.done) {
default_config.done(数据);
其他}{
layer.msg (default_config.msg);
}
其他}{
layer.msg (data.msg);
}
}
});
}
之前
以上这篇layui上传文件_批量导入数据UI的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
