LayUI

经过小编的初步筛选，我建议使用 LayUI，其口号为经典模块化前端框架，有返璞归真、双面体验、星辰大海的特点。

使用 LayUI

首先引入 LayUI 的 CDN

在我们的文件上传页面中的 head 部分引入 LayUI 的 CDN 资源。

<script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css">

修改文件上传按钮

LayUi 为我们提供了开箱即用的文件上传功能。

怎么样，看起来是不是还不错。

将之前的 form 表单修改为如下：

<form action="/upfile1/" method="POST" enctype="multipart/form-data">
        <button type="button" class="layui-btn" id="up_function" name='upload_list'>
            <i class="layui-icon">&#xe67c;</i>上传文件
          </button>
        <button type="submit" class="layui-btn">点击显示文件信息</button>
    </form>

你会发现，你使用了 LayUI 的 layui-btn 样式。同时在选择文件的按钮上融入了文件上传的 ico。

因为 layui 上传文件的操作是由 layui 的 upload 模块触发的，所以在上面的 form 表单中的 name='upload_list'和 action='/upfile1/'已经失效，需要在 layui 的 upload 对象中重新定义。

定义 LayUI 的 upload 对象

<script>
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#up_function' //绑定元素
            ,url: '/upfile1/' //上传接口
            ,accept: 'file' //限制上传文件类型
            ,field: 'upload_list'
            ,done: function(res){
            //上传完毕回调
            }
            ,error: function(){
            //请求异常回调
            }
        });
        });
        </script>

以上，因为 LayUI 上文件上传默认是异常自动上传的，当我们选择了文件，文件就已经被 layui 上传了，所以我们的 submit 按钮已经没用了。并且，从上面的代码中我们可以看到，当文件上传完成后，并没有做任何操作。如果需要展示新的页面就需要在 done 方法中定义。

页面效果

下一篇我们将介绍，怎么手动上传以及文件预览等功能。

感谢您的阅读，别忘了关注，点赞，评论，转发四连哟！

FastApi-16-页面美化-1