这里是关于基于WebUploader的文件上传js插件的完整攻略，包括安装、配置和示例的详细讲解。
安装
WebUploader是一个基于HTML5的文件上传插件，支持分片上传、大文件上传等功能。在使用WebUploader之前，我们需要引入jQuery库并下载WebUploader插件。
在HTML文件中引入jQuery及WebUploader插件。示例代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WebUploader示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
<div id="uploader-demo">
<div id="filePicker">选择文件</div>
<div id="fileList"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
</body>
</html>
配置
在引入WebUploader插件后，我们需要对WebUploader进行一些简单的配置。
创建WebUploader对象，示例代码如下：
var uploader = WebUploader.create({
// swf文件路径
swf: '/path/to/Uploader.swf',
// 文件接收服务端。
server: 'http://yourdomain.com/upload.php',
// 上传文件大小限制，单位：B，默认5GB
fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,
// 上传文件个数限制，默认无限制
fileNumLimit: 10,
/* 上传并发数限制，默认3 */
threads: 3,
/* 是否分片上传，默认true */
chunked: true,
/* 分片大小，默认5M */
chunkSize: 5 * 1024 * 1024,
// 自动上传。
auto: true,
// LIST容器
container: '#uploader-demo',
// 允许重复上传相同文件
duplicate: true,
// 指定接受类型，例如：image/*,application/pdf
accept: null,
// 是否禁用。
disableGlobalDnd: false,
// 文件列表容器。
fileNumLimit: 10,
// 名称，可以用作类名前缀。
baseClass: 'webuploader',
// 上传组件ID，默认为uploader。
id: 'uploader',
// 可以用来服务器上传其他参数
formData: {},
// 是否禁用multipart/form-data上传。
disableMultipart: false,
// 内部使用的名称，用于创建Input元素。
name: 'file',
// 是否禁用选择文件。
pick: {
id: '#filePicker',
multiple: true,
label: '点击选择文件'
},
// 设置上传文件的头信息，默认为空。
headers: {},
// 当文件上传出错时触发。
onError: function (file, code) {}
});
示例
下面展示两个基于WebUploader的文件上传示例：
上传单个文件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WebUploader示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
<div id="uploader-demo">
<div id="filePicker">选择文件</div>
<div id="fileList"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
<script>
var uploader = WebUploader.create({
swf: '/path/to/Uploader.swf',
server: 'http://yourdomain.com/upload.php',
fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,
threads: 3,
auto: true,
container: '#uploader-demo',
accept: null,
pick: {
id: '#filePicker',
multiple: false,
label: '点击选择文件'
},
onError: function (file, code) {console.log(code);}
});
uploader.on('fileQueued', function(file) {
console.log(file);
$('#fileList').append('<div id="' + file.id + '">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
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 + '%');
});
uploader.on('uploadSuccess', function(file) {
$('#' + file.id).find('.state').text('已上传');
});
uploader.on('uploadError', function(file) {
$('#' + file.id).find('.state').text('上传出错');
});
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut();
});
</script>
</body>
</html>
上传多个文件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>WebUploader示例</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.css">
</head>
<body>
<div id="uploader-demo">
<div id="filePicker">选择文件</div>
<div id="fileList"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/webuploader/0.1.5/webuploader.min.js"></script>
<script>
var uploader = WebUploader.create({
swf: '/path/to/Uploader.swf',
server: 'http://yourdomain.com/upload.php',
fileSingleSizeLimit: 5 * 1024 * 1024 * 1024,
threads: 3,
auto: true,
container: '#uploader-demo',
accept: null,
pick: {
id: '#filePicker',
multiple: true,
label: '点击选择文件'
},
onError: function (file, code) {console.log(code);}
});
uploader.on('fileQueued', function(file) {
console.log(file);
$('#fileList').append('<div id="' + file.id + '">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
});
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 + '%');
});
uploader.on('uploadSuccess', function(file) {
$('#' + file.id).find('.state').text('已上传');
});
uploader.on('uploadError', function(file) {
$('#' + file.id).find('.state').text('上传出错');
});
uploader.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut();
});
</script>
</body>
</html>
这两个示例展示了如何使用WebUploader实现单个文件和多个文件上传功能。需要注意的是，示例中的server和swf参数需要根据实际情况修改，具体路径需要自己配置。
希望这篇攻略能够对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于WebUploader的文件上传js插件 - Python技术站
微信扫一扫 
支付宝扫一扫 