集成WebUploader到現有項目中，可以按照以下步驟進行：
下載WebUploader源碼：訪問WebUploader的官方網站（http://www.webuploader.com/），下載最新版本的源碼包，解壓到你的項目中。
創建HTML文件：在項目的靜態資源目錄下（如/static/或/public/），創建一個HTML文件，例如webuploader.html。在這個文件中，引入WebUploader的CSS和JavaScript文件，并創建一個用于存放上傳列表的容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebUploader 示例</title>
<!-- 引入 WebUploader 的 CSS 文件 -->
<link rel="stylesheet" href="webuploader/dist/webuploader.css">
</head>
<body>
<!-- 創建一個用于存放上傳列表的容器 -->
<div id="uploader">
<div class="btns">
<div id="picker">選擇文件</div>
</div>
<div id="thelist" class="uploader-list"></div>
</div>
<!-- 引入 WebUploader 的 JavaScript 文件 -->
<script src="webuploader/dist/webuploader.min.js"></script>
<script>
// 初始化 WebUploader
var uploader = WebUploader.create({
// 選項配置
auto: true,
swf: "webuploader/dist/Uploader.swf",
server: "your-server-url", // 服務器上傳地址
pick: "#picker", // 選擇文件的按鈕
accept: {
title: "Images", // 顯示文本
extensions: "gif,jpg,jpeg,bmp,png",
mimeTypes: "image/*"
}
});
// 當有文件添加進來的時候
uploader.on("fileQueued", function(file) {
var $li = $(
'<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上傳...</p>' +
'</div>'
);
$("#thelist").append($li);
});
// 文件上傳過程中創建進度條實時顯示。
uploader.on("uploadProgress", function(file, percentage) {
var $li = $("#" + file.id),
$percent = $li.find(".progress .progress-bar");
// 避免重復創建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo($li).find(".progress-bar");
}
$li.find("p.state").text("上傳中");
$percent.css("width", percentage * 100 + "%");
});
// 文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
uploader.on("uploadSuccess", function(file) {
$("#" + file.id).addClass("upload-state-done");
});
// 文件上傳失敗，顯示上傳出錯。
uploader.on("uploadError", function(file) {
var $li = $("#" + file.id),
$error = $li.find("div.error");
// 避免重復創建
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$li.find("p.state").text("上傳失敗");
$error.text("文件上傳出錯");
});
// 完成上傳完了，成功或者失敗，先刪除進度條。
uploader.on("uploadComplete", function(file) {
$("#" + file.id).find(".progress").remove();
});
</script>
</body>
</html>
{
"status": "success",
"url": "/path/to/uploaded/file"
}
webuploader.html：在需要使用WebUploader的頁面中，引入剛剛創建的webuploader.html文件。確保引入的路徑正確，以便瀏覽器能夠找到并顯示該文件。通過以上步驟，你應該能夠在現有項目中成功集成WebUploader，并實現文件上傳功能。根據項目的具體需求，你可能需要進一步調整和優化WebUploader的配置和樣式。
