要自定義WebUploader的上傳界面，您需要修改其CSS樣式和JavaScript配置。以下是一些關鍵步驟：
以下是一個簡單的示例代碼，展示了如何自定義WebUploader的上傳界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom WebUploader</title>
<!-- 引入WebUploader的CSS文件 -->
<link rel="stylesheet" href="webuploader.css">
<!-- 引入自定義的CSS文件 -->
<link rel="stylesheet" href="custom.css">
</head>
<body>
<!-- 創建上傳容器 -->
<div id="uploader">
<!-- 選擇文件的按鈕 -->
<div class="btns">
<div id="picker">選擇文件</div>
</div>
<!-- 文件列表 -->
<div id="fileList" class="uploader-list"></div>
<!-- 進度條 -->
<div id="progress" class="progress">
<div class="bar"></div>
<div class="percent">0%</div>
</div>
</div>
<!-- 引入WebUploader的JavaScript文件 -->
<script src="webuploader.min.js"></script>
<!-- 引入自定義的JavaScript文件 -->
<script src="custom.js"></script>
</body>
</html>
在custom.css文件中，您可以添加自定義的CSS樣式來美化上傳界面：
/* 自定義上傳按鈕 */
#picker {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
/* 自定義文件列表 */
.uploader-list {
margin-top: 10px;
}
.uploader-list .item {
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}
/* 自定義進度條 */
#progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #eee;
}
#progress .bar {
height: 100%;
background-color: #1ab39a;
width: 0%;
transition: width 0.5s;
}
/* 自定義信息提示 */
#uploader .info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
在custom.js文件中，您可以添加自定義的JavaScript代碼來控制上傳過程：
// 初始化WebUploader
var uploader = WebUploader.create({
// 選項配置
auto: true,
swf: 'Uploader.swf',
server: 'http://webserver.com/fileupload',
pick: '#picker',
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 監聽上傳進度事件
uploader.on('uploadProgress', function(file, percentage) {
var $percent = $('#progress .percent');
$percent.text(percentage * 100 + '%');
$percent.css('width', percentage * 100 + '%');
});
// 監聽上傳成功事件
uploader.on('uploadSuccess', function(file, response) {
alert('上傳成功！');
});
// 監聽上傳失敗事件
uploader.on('uploadError', function(file, reason) {
alert('上傳失敗：' + reason);
});
以上示例代碼展示了如何自定義WebUploader的上傳界面，包括上傳按鈕、文件列表、進度條和信息提示。您可以根據自己的需求進一步調整和優化這些樣式和功能。
