引入資源
使用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
();
-
