//引入Plupload 、qiniu.js後
var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4‘, //上傳模式,依次退化
browse_button: ‘pickfiles‘, //上傳選擇的點選按鈕，**必需**
uptoken:getTokenMessage().token,
// uptoken_url: getToken(), //Ajax請求upToken的Url，**強烈建議設定**（服務端提供）
// uptoken : ‘‘, //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其他程式產生
// unique_names: true, // 預設 false，key為檔案名稱。若開啟該選項，SDK為自動產生上傳成功後的key（檔案名稱）。
// save_key: true, // 預設 false。若在服務端產生uptoken的上傳策略中指定了 `sava_key`，則開啟，SDK會忽略對key的處理
domain: ‘http://qiniu-plupload.qiniudn.com/‘, //bucket 網域名稱，下載資源時用到，**必需**
get_new_uptoken: false, //設定上傳檔案的時候是否每次都重新擷取新的token
container: ‘container‘, //上傳地區DOM ID，預設是browser_button的父元素，
max_file_size: ‘100mb‘, //最大檔案體積限制
flash_swf_url: ‘Moxie.swf‘, //引入flash,相對路徑
max_retries: 3, //上傳失敗最大重試次數
dragdrop: true, //開啟可拖曳上傳
drop_element: ‘container‘, //拖曳上傳地區元素的ID，拖曳檔案或檔案夾後可觸發上傳
chunk_size: ‘4mb‘, //分塊上傳時，每片的體積
auto_start: false, //選擇檔案後自動上傳，若關閉需要自己綁定事件觸發上傳
init: {
‘FilesAdded‘: function(up, files) {
plupload.each(files, function(file) {
// 檔案添加進隊列後,處理相關的事情
console.log(file.name);
});
},
‘BeforeUpload‘: function(up, file) {
// 每個檔案上傳前,處理相關的事情
},
‘UploadProgress‘: function(up, file) {
// 每個檔案上傳時,處理相關的事情
},
‘FileUploaded‘: function(up, file, info) {
// 每個檔案上傳成功後,處理相關的事情
// 其中 info 是檔案上傳成功後，服務端返回的json，形式如
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 參考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html // var domain = up.getOption(‘domain‘);
// var res = parseJSON(info);
// var sourceLink = domain + res.key; 擷取上傳成功後的檔案的Url
},
‘Error‘: function(up, err, errTip) {
//上傳出錯時,處理相關的事情
},
‘UploadComplete‘: function() {
//隊列檔案處理完畢後,處理相關的事情
},
‘Key‘: function(up, file) {
// 若想在前端對每個檔案的key進行個人化處理，可以配置該函數
// 該配置必須要在 unique_names: false , save_key: false 時才生效 var key = "12.png";
// do something with key here
return key
}
}
}); // domain 為七牛空間（bucket)對應的網域名稱，選擇某個空間後，可通過"空間設定->基本設定->網域名稱設定"查看擷取 // uploader 為一個plupload對象，繼承了所有plupload的方法，參考http://plupload.com/docs
function getTokenMessage() {
var token = {};
$.ajax({
url:your serverUrl
async:false,
success:function (data) {
var obj = JSON.parse(data);
token.token = obj.uploadToken;
token.filename = obj.filename;
}
})
return token;
}
document.getElementById(‘uploadfiles‘).onclick = function() {
uploader.start();
}; |
