七牛雲實現js上傳


七牛雲的官方API寫的一塌糊塗。最主要的,還是版本兼容的問題。

 一、引入文件

引入了兩個文件:

1.jquery-1.10.2.min.js

2.plupload.full.min.js

3.qiniu.js

版本太重要了。我提供了下載地址。

二.html代碼

<p class="tip1">本demo實現的圖片預覽功能需要瀏覽器支持data URL,IE8+以及其他標准瀏覽器都是支持的</p>
<div class="btn-wraper" style="position: relative;" id="container">
<button id="pickfiles">選擇文件</button>
<ul id="file-list">
</ul>
</div>
<button id="uploadfiles">上傳</button>

三、Js代碼

//引入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();
};

bingo.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM