1，介紹資源
使用Web Uploader上傳文件需要三種資源:JS、CSS和SWF。
& lt！CSS簡介->
& ltlinkrel = " style sheet " type = " text/CSS " href = " webuploader folder/webuploader . CSS " & gt；
& lt！-介紹JS->
& ltscript type = " text/JavaScript " src = " web uploader folder/web uploader . js " & gt；& lt/script & gt；
& lt！- SWF是初始化時指定的，後面會顯示->；
2、Html
首先，妳需要準備壹個按鈕和壹個容器，用於存儲添加的文件信息列表。
& lt！- dom結構部分-& gt；
& ltdiv？id = " uploader-demo " & gt；
& lt！-用來存放物品-& gt；
& ltdiv？id= "文件列表"？class="uploader-list " >& lt/div & gt；
& ltdiv？id = " filePicker " & gt選擇壹張圖片
& lt/div & gt；3、Javascript
創建壹個網站？上傳程序實例
//?初始化Web？上傳者
var？上傳者？=?WebUploader.create({
//?選擇文件後是否自動上傳。
自動:？沒錯，
//?Swf文件路徑
swf:？BASE_URL？+?/js/Uploader.swf '，
//?文件接收服務器。
服務器:？/server/fileupload.php '，
//?選擇文件的按鈕。可選。
//?內部是根據當前操作創建的，可能是輸入元素或flash。
挑:？#filePicker '，
//?只允許選擇圖片文件。
接受:？{
標題:？圖像'，
擴展:？' gif，jpg，jpeg，bmp，png '，
mimeTypes:？圖像/* '
}
});監聽fileQueued事件，通過uploader.makeThumb創建圖片預覽。
PS:這裏得到的是數據URL數據，IE6和IE7不支持直接預覽。您可以使用FLASH或服務器來完成預覽。
//?添加文件時。
uploader.on(？文件排隊'，？函數(？文件？)?{
var？$李？=?$(
& ltdiv？id= " '？+?file.id？+?'"?class="file-item？縮略圖" >？+
& ltimg & gt'？+
& ltdiv？' class="info " > '？+?文件名？+?& lt/div & gt；'？+
& lt/div & gt；'
),
$img？=?$ Li . find(' img ')；
//?$list是壹個容器jQuery實例。
$list.append(？$李？);
//?創建縮略圖
//?如果是非圖像文件，就不用調用這個方法。
//?拇指寬度？x？拇指高度？為了什麽？100?x？100
uploader.makeThumb(？文件，？函數(？錯誤，？src？)?{
如果？(?錯誤？)?{
$ img . replace with(' & lt；span & gt無法預覽
返回；
}
$img.attr(？src '，？src？);
},?縮略圖寬度，？拇指高度？);
});然後剩下的就是上傳狀態提示了。在文件上傳過程中，上傳成功、上傳失敗和上傳完成分別對應上傳進度、上傳成功、上傳錯誤和上傳完成事件。
//?創建壹個在文件上傳過程中實時顯示的進度條。
uploader.on(？'上傳進度'，？函數(？文件，？百分比？)?{
var？$李？=?$(?#'+file.id？),
$百分比？=?$li.find('。進步？span’)；
//?避免重復創建
如果？(?！$percent .長度？)?{
$百分比？=?$(' & lt；p？class="progress " >& ltspan & gt& lt/span>。& lt/p & gt；')
。appendTo(？$李？)
。查找(' span ')；
}
$percent.css(？寬度'，？百分比？*?100?+?'%'?);
});
//?文件已成功上傳，項目已成功添加。使用樣式標簽成功上傳。
uploader.on(？'上傳成功'，？函數(？文件？)?{
$(?#'+file.id？).add class(“upload-state-done”)；
});
//?文件上傳失敗，顯示上傳錯誤。
uploader.on(？uploadError '，？函數(？文件？)?{
var？$李？=?$(?#'+file.id？),
$error？=?$ Li . find(' div . error ')；
//?避免重復創建
如果？(?！$error.length)?{
$error？=?$(' & lt；div？class="error " >& lt/div & gt；').appendTo(？$李？);
}
$error.text(“上載失敗”)；
});
//?上傳完畢，無論成功還是失敗，先刪除進度條。
uploader.on(？'上傳完成'，？函數(？文件？)?{
$(?#'+file.id？).查找('。進步’)。移除()；
});更多細節，請查看js源代碼。