网络编程
位置:首页>> 网络编程>> JavaScript>> layui 上传文件_批量导入数据UI的方法

layui 上传文件_批量导入数据UI的方法

作者:xiaozaq  发布时间:2024-05-22 10:36:41 

标签:layui,上传文件,导入,数据UI

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

效果如下:

layui 上传文件_批量导入数据UI的方法

点击【批量导入】按钮调用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 = '<div class="layui-upload-drag" id="'+idRandom+'">';
htmlContent += '<i class="layui-icon"></i>';
htmlContent += '<p>点击上传,或将文件拖拽到此处</p>';
htmlContent += '</div>';

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></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);
    }
  }
});
}

来源:https://blog.csdn.net/xiaozaq/article/details/83111880

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com