阅读量:146
集成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 = $(
'id + '" class="item">' +
''
+ file.name + '' +
'等待上传...
' +
''
);
$("#thelist").append($li);
});
// 文件上传过程中创建进度条实时显示。
uploader.on("uploadProgress", function(file, percentage) {
var $li = $("#" + file.id),
$percent = $li.find(".progress .progress-bar");
// 避免重复创建
if (!$percent.length) {
$percent = $('' +
'' +
'').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 = $('').appendTo($li);
}
$li.find("p.state").text("上传失败");
$error.text("文件上传出错");
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on("uploadComplete", function(file) {
$("#" + file.id).find(".progress").remove();
});
</script>
</body>
</html>
- 配置服务器端：根据你的项目需求，配置服务器端以处理文件上传。服务器端应该返回一个JSON对象，包含文件的相关信息（如文件名、路径等）。示例响应如下：
{
"status": "success",
"url": "/path/to/uploaded/file"
}
- 在现有项目中引入
webuploader.html：在需要使用WebUploader的页面中，引入刚刚创建的webuploader.html文件。确保引入的路径正确，以便浏览器能够找到并显示该文件。
通过以上步骤，你应该能够在现有项目中成功集成WebUploader，并实现文件上传功能。根据项目的具体需求，你可能需要进一步调整和优化WebUploader的配置和样式。