你可能已经发现，前面学习中我们的页面很简单，甚至有点丑陋，那么我们怎么样可以将它做的好看一点呢？答案是使用现成的前端框架。
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"></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 方法中定义。
页面效果
网络异常，图片无法展示
|
下一篇我们将介绍，怎么手动上传以及文件预览等功能。
感谢您的阅读，别忘了关注，点赞，评论，转发四连哟！
