利用layui框架完成上传

原创 2019-02-25 14:51:43 427
摘要:<!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>&#xe67c;</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>

2019-02-25_144914.png

layUI框架是快速搭建网站的模板,尤其是后台网站。可以layui对按钮,表格,表单,弹窗等快速渲染,构建时注意要调用相应的模块,在利用jquery代码时,注意是否引用$ = layui.jquery模块。

批改老师:灭绝师太批改时间:2019-02-25 16:30:22
老师总结:layui跟后台联系的还是很紧密的,要仔细看文档哦!

发布手记

热门词条