什么是layui的文件上传功能
layui是一款领先的前端UI框架，它提供了丰富的组件和工具，其中也包括了文件上传功能。通过layui的上传组件，开发者可以很方便地实现文件上传并管理功能。
如何使用layui的文件上传功能
要使用layui的文件上传功能，需要引入layui的核心文件和上传组件文件，其中上传组件文件可以从layui官网下载获取。然后在HTML文件中添加文件上传组件的HTML结构，同时通过JavaScript代码初始化上传组件，如下所示：
<!-- 引入核心文件 -->
<script src="layui/layui.js"></script>
<!-- 引入上传组件文件 -->
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>
<!-- 添加文件上传组件的HTML结构 -->
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">上传文件</button>
<span id="fileName"></span>
</div>
<!-- 初始化上传组件 -->
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload/', //上传接口
done: function(res){
//上传完毕回调
},
error: function(){
//请求异常回调
}
});
});
</script>
通过上面的代码，就可以实现文件上传的基本功能。用户在点击“上传文件”按钮后，会弹出系统的文件选择窗口，用户在选择完文件后，选择确定即可上传文件。上传成功后，会执行done回调函数，将上传结果返回给客户端。
如何获取上传的文件名
获取上传文件的原始名称
在layui的文件上传组件中，可以通过监听choose事件获取到用户选择要上传的文件信息。在回调函数中，可以获取到一个数组，包含了所有用户选择的文件信息，其中就包括用户选择的文件名。具体代码如下：
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">上传文件</button>
<span id="fileName"></span>
</div>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload/', //上传接口
choose: function(obj){
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
//文件选中后的回调函数
$('#fileName').text(file.name); //显示文件名
});
},
done: function(res){
//上传完毕回调
},
error: function(){
//请求异常回调
}
});
});
</script>
在上面的代码中，我们通过监听choose事件获取用户选择的文件信息，然后通过回调函数获取到每个文件的名称。最后将文件名显示在页面上，用户就可以看到自己选择的文件名。
获取上传后的文件名称
当一个文件上传成功后，后台服务器会将文件保存到指定的位置，并返回一个上传结果给客户端。在layui的上传组件中，可以通过done回调函数获取到上传结果对象。对象中包含了上传文件的详细信息，其中也包括了上传后的文件名。
<div class="layui-upload">
<button type="button" class="layui-btn" id="upload">上传文件</button>
<span id="fileName"></span>
</div>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#upload', //绑定元素
url: '/upload/', //上传接口
choose: function(obj){
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
//文件选中后的回调函数
$('#fileName').text(file.name); //显示文件名
});
},
done: function(res){
//上传完毕回调
$('#fileName').text(res.filename); //显示上传后的文件名
},
error: function(){
//请求异常回调
}
});
});
</script>
在上面的代码中，我们在done回调函数中获取到了上传结果对象，通过对象中的filename属性获取上传后的文件名，并将其显示在页面上。
总结
layui的文件上传组件是一个非常方便的文件上传工具，能够让开发者快速地实现文件上传和管理功能。其中，获取上传文件名是非常重要的一个功能，可以让用户清晰地了解自己上传了哪些文件，方便后续的操作。通过本文介绍的方法，开发者可以轻松地获取上传文件名，并将其显示在页面上，为用户提供更好的使用体验。