摘要:<!DOCTYPE html> <html> <head> <!-- 主要是学习文件的上传 --> <meta charset="UTF-8"> <title>添加</title> <link rel="stylesheet&qu
<!DOCTYPE html>
<html>
<head>
<!-- 主要是学习文件的上传 -->
<meta charset="UTF-8">
<title>添加</title>
<link rel="stylesheet" href="../layui-v2.4.5/layui/css/layui.css">
<script type="text/javascript" src="../layui-v2.4.5/layui/layui.js"></script>
</head>
<body style="padding:10px">
<form action="">
<div>
<label>商品类目</label>
<div>
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
</div>
<div>
<label>商品名称</label>
<div>
<input type="text">
</div>
</div>
<div>
<label>价格</label>
<div>
<input type="text">
</div>
</div>
<!-- 文件上传 -->
<div>
<div>
<button type="button" id="test1">
<i></i>上传图片
</button>
</div>
</div>
<div>
<label>描述</label>
<div>
<textarea name="desc" placeholder="请输入内容"></textarea>
</div>
</div>
<div>
<label>状态</label>
<div>
<input type="checkbox" name="" title="上架" lay-skin="primary" checked>
</div>
</div>
<div>
<button lay-submit lay-filter="formDemo">保存</button>
</div>
</form>
<script>
layui.use(['upload','form'], function(){
var upload = layui.upload; //引入上传的模块
var form=layui.form;
//执行上传实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>
layUI框架是快速搭建网站的模板,尤其是后台网站。可以layui对按钮,表格,表单,弹窗等快速渲染,构建时注意要调用相应的模块,在利用jquery代码时,注意是否引用$ = layui.jquery模块。
批改老师:灭绝师太批改时间:2019-02-25 16:30:22
老师总结:layui跟后台联系的还是很紧密的,要仔细看文档哦!