1.引入相關(guān)插件
<script src="http://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
<script src="http://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
2.實力化上傳插件
<script type="text/javascript">
var token = "{{$token}}"; //獲取上傳憑證token
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', //上傳模式,依次退化
container: 'container', //上傳區(qū)域DOM ID淤毛，默認(rèn)是browser_button的父元素谆吴，
browse_button: 'upload', //上傳選擇的點選按鈕王带，**必需** id
drop_element: 'container', //拖拽區(qū)域,以上這三個屬性都是字符串類型
uptoken: token,
domain: 'airlink', //bucket 域名读存，下載資源時用到，**必需**
get_new_uptoken: false, //設(shè)置上傳文件的時候是否每次都重新獲取新的token
max_file_size: '500mb', //最大文件體積限制
max_retries: 3, //上傳失敗最大重試次數(shù)
chunk_size: '10mb', //分塊上傳時，每片的體積
flash_swf_url: '/js/plupload/Moxie.swf', // flash的相對地址
auto_start: true, //選擇文件后自動上傳，若關(guān)閉需要自己綁定事件觸發(fā)上傳
unique_names: true, //設(shè)置所有文件名唯一
multi_selection: false, //不允許多選
filters: {
mime_types: [ //只允許上傳圖片
{
title: "Image files",
extensions: "exe"
}
],
prevent_duplicates: true, //不允許選取重復(fù)文件
max_file_size: '500mb'
},
resize: { //對上傳的圖片進(jìn)行壓縮
width: 1080, // 寬
height: 500, // 高
quality: 80, // 壓縮質(zhì)量振坚，只對jpg格式的圖片有效，默認(rèn)為90斋扰，100為不壓縮渡八，越大質(zhì)量越好
crop: false // 是否裁剪圖片
},
init: {
//選擇文件
'FilesAdded': function (up, files) {
console.log(files);
files = files[0];
console.log(files.name);
size = conver(files.size);
$('.file-zone').css('display','block')
$('#fsUploadProgress').find('tr').remove();
html= `<tr id="o_1drl54r9d1rubvfeds2nj8ag9a" class="progressContainer"style="opacity: 1;">
<td class="progressName">`+files.name+` </td>
<td class="progressFileSize">`+size+`</td>
<td id="o_1drl54">
<div class="progress">
<div class="progress-bar" id='progress-bar' role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
</div>
</div>
</td>
</tr>`
$('#fsUploadProgress').append(html);
// 選擇文件后的回調(diào)
// files為本次添加的圖片列表啃洋，files[0].getNative()可以獲取原生文件對象
},
'BeforeUpload': function (up, file) {
// 每個文件上傳前,處理相關(guān)的事情
},
//文件上傳中
'UploadProgress': function (up, file) {
console.log(file.percent)
document.getElementById('progress-bar').style.width = file.percent+'%';
document.getElementById('progress-bar').innerHTML = file.percent+'%';
// 每個文件上傳時,處理相關(guān)的事情
},
//文件上傳完成
'FileUploaded': function (up, file, info) {
var box = document.getElementById('o_1drl54');
console.log(box);
box.innerHTML ="上傳完成";
// 每一張圖片上傳完成后的回調(diào)
// info中為七牛返回的相關(guān)信息，為一個json字符串屎鳍，比如下面這個
// "{"bucket":"jb-medical","colorModel":"ycbcr","duration":null,"fname":"0544577b91a59efaf39fea77e11dda4a.jpg","format":"jpeg","fsize":92380,"hash":"FquL9DHBuzzlR5V-v0TOn4bCQxIf","height":675,"key":"o_1bhegvmtvk64inehuv1qvf17dro.jpg","size":null,"url":"https://oi3o224r8.qnssl.com","width":1080}"
info = JSON.parse(info); // 轉(zhuǎn)成json
var src = 'http://download.timelink.cn/' + info.key; // 獲取到圖片的七牛url
console.log(src);
$('#name').val(file.name);
$('#path').val(src);
var stamp = document.getElementById("submit");//設(shè)置按鈕可用
stamp.disabled = false;
},
'Error': function (up, err, errTip) {
// 錯誤回調(diào)宏娄，具體的code見Plupload文檔，如果引入了語言包逮壁，errTip會是對應(yīng)語言的錯誤提示
if (err.code == -600) {
// size超過5m
alert('每張圖片大小請勿超過5M')
} else {
alert(errTip)
}
},
'UploadComplete': function (up, file) {
//隊列文件處理完畢后,處理相關(guān)的事情
}
}
});
注意點
如果設(shè)置為不自動上傳孵坚，則需要用js手動啟動上傳
uploader.start();
文件的刪除和添加
uploader.removeFile(file);
uploader.addFile(file);
