摘要:<!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跟后台联系的还是很紧密的,要仔细看文档哦!