引入资源
使用Web Uploader文件上传须要引入三种资源：JS, CSS, SWF。javascript
-
-
<link
rel=
"stylesheet"
type=
"text/css"
href=
"webuploader文件夹/webuploader.css"
>
-
-
-
<script
type=
"text/javascript"
src=
"webuploader文件夹/webuploader.js"
></script>
-
-
<!--SWF在初始化的时候指定，在后面将展现-->
文件上传
WebUploader只包含文件上传的底层实现，不包括UI部分。因此交互方面能够自由发挥，如下将演示如何去实现一个简单的版本。php
请点击下面的选择文件按钮，而后点击开始上传体验此Demo。css
Html部分
首先准备dom结构，包含存放文件信息的容器、选择按钮和上传按钮三个部分。web
-
<div
id=
"uploader"
class=
"wu-example"
>
-
-
<div
id=
"thelist"
class=
"uploader-list"
></div>
-
-
<div
id=
"picker"
>选择文件
</div>
-
<button
id=
"ctlBtn"
class=
"btn btn-default"
>开始上传
</button>
-
-
初始化Web Uploader
具体说明，请看一下代码中的注释部分。app
-
var
uploader
=
WebUploader
.
create
({
-
-
-
swf
:
BASE_URL
+
'/js/Uploader.swf'
,
-
-
-
server
:
'http://webuploader.duapp.com/server/fileupload.php'
,
-
-
-
// 内部根据当前运行是建立，多是input元素，也多是flash.
-
-
-
// 不压缩image, 默认若是是jpeg，文件上传前会压缩一把再上传！
-
-
显示用户选择
因为webuploader不处理UI逻辑，因此须要去监听fileQueued事件来实现。dom
-
-
uploader
.
on
(
'fileQueued'
,
function
(
file
)
{
-
$list
.
append
(
'<div id="'
+
file
.
id
+
'" class="item">'
+
-
'<h4 class="info">'
+
file
.
name
+
'</h4>'
+
-
'<p class="state">等待上传...</p>'
+
-
-
文件上传进度
文件上传中，Web Uploader会对外派送uploadProgress事件，其中包含文件对象和该文件当前上传进度。spa
-
-
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>'
).
appendTo
(
$li
).
find
(
'.progress-bar'
);
-
-
-
$li
.
find
(
'p.state'
).
text
(
'上传中'
);
-
-
$percent
.
css
(
'width'
,
percentage
*
100
+
'%'
);
-
文件成功、失败处理
文件上传失败会派送uploadError事件，成功则派送uploadSuccess事件。无论成功或者失败，在文件上传完后都会触发uploadComplete事件。code
-
uploader
.
on
(
'uploadSuccess'
,
function
(
file
)
{
-
$
(
'#'
+
file
.
id
).
find
(
'p.state'
).
text
(
'已上传'
);
-
-
-
uploader
.
on
(
'uploadError'
,
function
(
file
)
{
-
$
(
'#'
+
file
.
id
).
find
(
'p.state'
).
text
(
'上传出错'
);
-
-
-
uploader
.
on
(
'uploadComplete'
,
function
(
file
)
{
-
$
(
'#'
+
file
.
id
).
find
(
'.progress'
).
fadeOut
();
-
图片上传
与普通文件上传相比，此demo演示了：文件过滤，图片预览，图片压缩上传等功能。orm
1-1.png
上传失败
1-2.png
上传失败
1-3.png
上传失败
Html
要实现如上demo，首先须要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
-
-
<div
id=
"uploader-demo"
>
-
-
<div
id=
"fileList"
class=
"uploader-list"
></div>
-
<div
id=
"filePicker"
>选择图片
</div>
-
Javascript
建立Web Uploader实例
-
-
var
uploader
=
WebUploader
.
create
({
-
-
-
-
-
-
swf
:
BASE_URL
+
'/js/Uploader.swf'
,
-
-
-
server
:
'http://webuploader.duapp.com/server/fileupload.php'
,
-
-
-
// 内部根据当前运行是建立，多是input元素，也多是flash.
-
-
-
-
-
-
extensions
:
'gif,jpg,jpeg,bmp,png'
,
-
-
-
监听fileQueued事件，经过uploader.makeThumb来建立图片预览图。
PS: 这里获得的是Data URL数据，IE六、IE7不支持直接预览。能够借助FLASH或者服务端来完成预览。
-
-
uploader
.
on
(
'fileQueued'
,
function
(
file
)
{
-
-
'<div id="'
+
file
.
id
+
'" class="file-item thumbnail">'
+
-
-
'<div class="info">'
+
file
.
name
+
'</div>'
+
-
-
-
$img
=
$li
.
find
(
'img'
);
-
-
-
-
-
-
-
-
// thumbnailWidth x thumbnailHeight 为 100 x 100
-
uploader
.
makeThumb
(
file
,
function
(
error
,
src
)
{
-
-
$img
.
replaceWith
(
'<span>不能预览</span>'
);
-
-
-
-
$img
.
attr
(
'src'
,
src
);
-
},
thumbnailWidth
,
thumbnailHeight
);
-
而后剩下的就是上传状态提示了，当文件上传过程当中, 上传成功，上传失败，上传完成都分别对应uploadProgress,uploadSuccess, uploadError, uploadComplete事件。
-
-
uploader
.
on
(
'uploadProgress'
,
function
(
file
,
percentage
)
{
-
var
$li
=
$
(
'#'
+
file
.
id
),
-
$percent
=
$li
.
find
(
'.progress span'
);
-
-
-
if
(
!
$percent
.
length
)
{
-
$percent
=
$
(
'<p class="progress"><span></span></p>'
)
-
-
-
-
-
$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
);
-
-
-
$error
.
text
(
'上传失败'
);
-
-
-
-
uploader
.
on
(
'uploadComplete'
,
function
(
file
)
{
-
$
(
'#'
+
file
.
id
).
find
(
'.progress'
).
remove
();
-
