Layui 是一個基于前端技術的 UI 框架，它主要用于構建網頁應用。在 Layui 中，你可以使用 Form 組件來實現文件上傳功能。以下是一個簡單的示例，展示了如何在 Layui 中使用 PHP 后端實現文件上傳。
首先，確保你已經在 HTML 文件中引入了 Layui 的 CSS 和 JavaScript 文件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/css/layui.css" media="all">
</head>
<body>
<form class="layui-form" action="/upload.php" method="post" enctype="multipart/form-data">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">選擇文件</label>
<div class="layui-input-inline">
<input type="file" name="file" required lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn" lay-submit lay-filter="upload">上傳</button>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
// 監聽提交
form.on('submit(upload)', function(data){
var field = data.field; // 表單字段
// 執行上傳操作
layui.$.upload({
url: '/upload.php', // 服務器上傳接口
method: 'POST',
data: field,
done: function(res){
// 上傳成功后的回調
console.log(res);
alert('上傳成功');
},
error: function(err){
// 上傳失敗后的回調
console.log(err);
alert('上傳失敗');
}
});
return false; // 阻止表單默認提交行為
});
});
</script>
</body>
</html>
接下來，創建一個名為 upload.php 的 PHP 文件，用于處理文件上傳。在這個文件中，你可以使用 PHP 的內置函數 $_FILES 來獲取上傳的文件信息，并將其保存到服務器上。以下是一個簡單的示例：
<?php
if ($_FILES["file"]["error"] > 0) {
echo "Error: " . $_FILES["file"]["error"] . "<br>";
} else {
$upload_dir = "uploads/"; // 上傳目錄
$upload_file = $upload_dir . basename($_FILES["file"]["name"]); // 保存文件名
if (move_uploaded_file($_FILES["file"]["tmp_name"], $upload_file)) {
echo "File is valid, and was successfully uploaded.<br>";
} else {
echo "Upload failed.<br>";
}
}
?>
確保在服務器上創建一個名為 uploads 的目錄，用于存放上傳的文件。同時，確保該目錄具有適當的權限，以便 PHP 能夠將文件保存到其中。
現在，當你在前端頁面中選擇一個文件并點擊上傳按鈕時，文件將通過 Layui 提交到 upload.php 腳本，并在服務器上保存。
