項目中用到改上傳插件,因此抽了一晚上事件把列子和文檔看了一下,翻譯過來,如有錯誤的翻譯請幫助我一起糾正謝謝。
介紹:
Plupload是有TinyMCE的開發者開發的,為您的內容管理系統或是類似上傳程序提供一個高度可用的上傳插件。Plupload 目前分為一個核心API 和一個jQuery上傳隊列部件,這樣使你可以直接使用或是自己定制。
特性:
注釋:1、gears:http://zh.wikipedia.org/wiki/Gears
2、Silverlight:http://zh.wikipedia.org/wiki/Silverlight
3、browserplus: http://developer.yahoo.com/browserplus/
注意:1、分塊:chrome和firefox 4+ 支持。
2、拖拽適用於firefox和webkit內核的瀏覽器,windows版的safari還存在一些問題待解決。
3、圖片縮放僅在firefox3.5+和chrome上支持,safari/opera 不支持直接數據訪問選定的文件。
4、目前所有的瀏覽器不支持文件類型過濾。但是,我們填寫HTML5的接受文件類型過濾屬性,一旦有支持它會工作。
5、 多文件上傳僅支持gecko和webkit內核的瀏覽器。
配置文檔說明:
Browse_button:觸發瀏覽文件按鈕標簽的唯一id,,在flash、html5、和silverlight中能找到觸發事件的源(我理解的,這個參數在隊列部件不需要參見)
Container: 展現上傳文件列表的容器,[默認是body]
chunk_size:當上傳文件大於服務器接收端文件大小限制的時候,可以分多次請求發給服務器,如果不需要從設置中移出
drop_element:當瀏覽器支持拖拽的情況下,能夠文件拖放到你想要的容器ID里
file_data_name:設置上傳字段的名稱。默認情況下被設置為文件。(我試驗了沒找到該如何使用它,暫且不提)
filters:選擇文件擴展名的過濾器,每個過濾規則中只有title和ext兩項[{title:'', extensions:''}]
flash_swf_url:flash文件地址
headers:自定義的插入http請求的鍵值對
max_file_size:最大上傳文件大小(格式100b, 10kb, 10mb, 1gb)
multipart:布爾值,如果用mutlipart 代替二進制流的方式,在webkit下無法工作
multipart_params: 跟 multipart關聯在一起的鍵值對
multi_selection: 多選對話框
resize:修改圖片屬性 resize: {width: 320, height: 240, quality: 90}
runtimes:上傳插件初始化選用那種方式的優先級順序,如果第一個初始化失敗就走第二個,依次類推
required_features:需要那些特性,才能初始化插件
url:上傳服務器地址
unique_names:是否生成唯一的文件名,避免與服務器文件重名
urlstream_upload:布爾值 如果是flash上傳應該用URLStream 代替FileReference.upload
jquery部件的屬性:
dragdrop:是否支持拖拽,默認值true
multiple_queues:是否可以多次上傳
preinit:插件初始化前回調函數
rename:布爾值,上傳之前可以重命名文件,默認false,木有找到如何重命名啊
API文檔:
方法列表:
Uploader(setting):創建實例的構造方法
var uploader = new plupload.Uploader({ runtimes : 'gears,html5,flash', browse_button : 'button_id' });
bind(event, function[, scope]):綁定事件
uploader.bind('Init', function(up) { alert('Supports drag/drop: ' + (!!up.features.dragdrop)); });
destroy():銷毀plupload的實例對象
uploader.destroy()
getFile(id): 獲取上傳文件信息
uploader.bind('FilesAdded', function(up, files) {
for (var i in files) {
up.getFile(files[i].id);
}
});
注:file:{
id:文件編號,
loaded: 已經上傳多少字節,
name: 文件名,
percent: 上傳進度,
size: 文件大小,
status: 有四種狀態 QUEUED, UPLOADING, FAILED, DONE.對應數值
}
init:初始化plupload實例,添加監聽對象
uploader.destroy()
refresh:重新實例化uploader
splice(start,length):從隊列中start開始刪除length個文件, 返回被刪除的文件列表
start() 開始上傳
stop()停止上傳
unbind(name, function): 接觸事件綁定
unbindAll()解綁所有事件
屬性集合:
features:uploader中包含那些特性
files:當前隊列中的文件列表
id:uploader實例的唯一id
runtime:當前運行環境(是html5、flash等等)
state:當前上傳進度狀態
total:當前上傳文件的信息集合
事件集合:(up為uploader縮寫)
BeforeUpload(up, file):文件上傳完之前觸發的事件
ChunkUploaded(up, file,response)文件被分塊上傳的事件
Destroy(up):uploader的destroy調用的方法
Error(up, err):上傳出錯的時候觸發
Fileadded(up, files):用戶選擇文件時觸發
FileRemoved(up, files):當文件從上傳隊列中移除觸發
FileUploaded(up, file, res):文件上傳成功的時候觸發
Init(up):當初始化的時候觸發
PostInit(up):init執行完以后要執行的事件觸發
QueueChanged(up):當文件隊列變化時觸發
Refresh(up):當silverlight/flash或是其他運行環境需要移動的時候觸發
StateChanged(up)當整個上傳隊列被改變的時候觸發
UploadComplete(up,file)當隊列中所有文件被上傳完時觸發
UploadFile(up,file)當一個文件被上傳的時候觸發
UploadProgress(up,file):當文件正在被上傳中觸發
參見:
示例:http://plupload.com/example_queuewidget.php
API:http://plupload.com/plupload/docs/api/index.html