| Layui框架的拖动上传 以及 时间选择器的基本使用 | 您所在的位置：网站首页 › layui拖拽上传文件 › Layui框架的拖动上传 以及 时间选择器的基本使用 |
Layui框架的拖动上传 以及 时间选择器的基本使用
|
上传用的layui的点击or拖动上传 其他上传也同理 （不喜勿喷 欢迎补充）
上代码 //html 上传附件: //类名前缀必须要跟官网一样 不然不生效 点击上传，或将文件拖拽到此处 //js代码 layui.use('upload', function () { var upload = layui.upload; //执行上传组件 upload.render({ elem: '#uploadFileMaterial', //绑定元素，上面的layui-upload-drag类或者你自己定义的元素id url: uploadFile, //上传接口 before: function (obj) { // 预读本地文件示例，不支持ie8 obj.preview(function (index, file, result) { fileName = file.name console.log('fileName', fileName); }); }, accept: "file", headers: { 'dm-authorize-token': $.cookie("token"), }, done: function (res) { if (res.code == 200) { //上传完毕回调 layer.msg("上传成功"); fileUrl = res.msg } else { layer.msg(res.msg); } }, error: function () { //请求异常回调 } }); });上面上传file打印是
一般需要我们上传 文件名 和 文件链接 Layui时间选择器这里是使用俩种 区间选择 和 单个选择 一、区间选择
//html 样式我有点复杂 大家可以后面调成自己项目的样式 主要看逻辑 时间查询: 
//清除时间选择器
//js代码
// 时间选择
layui.use('laydate', function () {
var laydate = layui.laydate;
//日期范围
//日期时间选择器
laydate.render({
elem: '#seachtime'
, type: 'date'
, trigger: 'click'
, range: true,//开启时间范围选择,
done: function (value, data) {
console.log(data);
console.log(value); //2023-06-12 - 2023-07-13
}
});
});
// 清除日期
function delweektime() {
$(".delweektimeall").val("")
}
二、单独选择
//html 计划开工日期*: //js代码 // 日期 function initTimeEvent() { layui.use(['laydate'], function () { var laydate = layui.laydate; //当前时间 var nowTime = new moment().format("yyyy-MM-DD"); laydate.render({ //你定义的id名 elem: '#projectBeginTime', trigger: 'click', value: nowTime, format: 'yyyy-MM-dd', //设置日期格式 // min: 'string', //设置最小值 done: function (value, date) { } }); //这是一个页面另外一个日期选择器的 laydate.render({ elem: '#projectEndTime', trigger: 'click', value: nowTime, format: 'yyyy-MM-dd', //设置日期格式 // min: 'string', //设置最小值 done: function (value, date) { } }); }); } 这个value跟上面那个一样也是获取的时间 但是我们直接就回显到页面上了 大家使用的时候直接 var projectBeginTime = $("#projectBeginTime").val();获取它页面上输入框中的数据就行 |
【本文地址】
公司简介
联系我们