七牛雲js直傳外掛程式

標籤：ret   qiniu   unique   options   rip   ***   chunk   java   預設   

作為一個後端能寫前端外掛程式就不要要求那麼高了，就能上傳就差不多了。。。

直接來代碼了，一開始想用javascript直接寫的，後來就寫著寫著就變成混著寫了

先調用jquery

<script type="text/javascript" src="js/jquery.min.js"></script>

然後調用七牛的外掛程式

<script src="/js/tupload9/plupload.full.min.js" ></script>
<script src="/js/tupload9/qiniu.min.js" ></script>

最後就開始自己寫外掛程式了

(function($){
$.fn.qiniuUpload = function(options){
var defaults={
//progress:"progress",
//fill:"fill",
//filltext:"filltext",
pickfiles:"pickfiles",//點擊觸發上傳事件
drop_element:"container",//可拖拽地區
valueId:"photo",//表單input
photoshow:"photoshow",//回調顯示地區
uptoken_url:‘**********************‘,
domain_url:‘************‘,
maxlength:1,
}
options = $.extend(defaults,options);
var photoshow = document.getElementById(options.photoshow),
valueId = document.getElementById(options.valueId);
//progress=document.getElementById(options.progress),
// fill=document.getElementById(options.fill),
// filltext=document.getElementById(options.filltext),
var uploader = Qiniu.uploader({
runtimes: ‘html5,flash,html4‘, // 上傳模式,依次退化
browse_button: options.pickfiles, // 上傳選擇的點選按鈕，**必需**
uptoken_url: options.uptoken_url,
get_new_uptoken: true, // 設定上傳檔案的時候是否每次都重新擷取新的 uptoken
save_key: true, // 預設 false。若在服務端產生 uptoken 的上傳策略中指定了 `sava_key`，則開啟，SDK在前端將不對key進行任何處理
domain: options.domain_url, // bucket 網域名稱，下載資源時用到，**必需**
container: options.drop_element, // 上傳地區 DOM ID，預設是 browser_button 的父元素，
max_file_size: ‘4mb‘, // 最大檔案體積限制
flash_swf_url: ‘js/Moxie.swf‘, //引入 flash,相對路徑
max_retries: 3, // 上傳失敗最大重試次數
dragdrop: true, // 開啟可拖曳上傳
drop_element: options.drop_element,// 拖曳上傳地區元素的 ID，拖曳檔案或檔案夾後可觸發上傳
chunk_size: ‘4mb‘, // 分塊上傳時，每塊的體積
auto_start: true, // 選擇檔案後自動上傳，若關閉需要自己綁定事件觸發上傳,
init: {
‘FilesAdded‘: function(up, files) {
plupload.each(files, function(file) {
// 檔案添加進隊列後,處理相關的事情
});
},
‘BeforeUpload‘: function(up, file) {
// 每個檔案上傳前,處理相關的事情
//console.log(photoshow.getElementsByTagName("li").length);
if(photoshow.getElementsByTagName("li").length>=options.maxlength){
showTip("超過最大上傳限制")
return false;
}
},
‘UploadProgress‘: function(up, file) {
// 每個檔案上傳時,處理相關的事情
//console.log(file);
var load = photoshow.getElementsByTagName("div");
load[0].style.display = "inline-block";
if(file && file.percent == 100){
load[0].style.display = "none";
}
// filltext.innerHTML=‘上傳進度:‘+file.percent+‘%‘;
// fill.style.display=‘inline-block‘;
},
‘FileUploaded‘: function(up, file, info) {
// 每個檔案上傳成功後,處理相關的事情
// 其中 info 是檔案上傳成功後，服務端返回的json，形式如
// {
// state:"1"
// url:",//p20.jxft.net/180828/1435993_0754005279.jpg--8428364"
// }
var domain = up.getOption(‘domain‘);
var data = JSON.parse(info);
//console.log(data);
if(data.state>0){
var split = data.url.split("--");
var img_url = split[0].substr(1);
uploadResult(img_url);
}else{
showTip(data.msg);
}
},
‘Error‘: function(up, err, errTip) {
//上傳出錯時,處理相關的事情
},
‘UploadComplete‘: function() {
//隊列檔案處理完畢後,處理相關的事情
// fill.style.animationPlayState="paused"
//progress.style.display=‘none‘;
},
‘Key‘: function(up, file) {
// 若想在前端對每個檔案的key進行個人化處理，可以配置該函數
// 該配置必須要在 unique_names: false , save_key: false 時才生效
//key就是上傳的檔案路徑
return key
}
}
});

function uploadResult(url){
var photo = valueId.value;
photo = photo?photo:"";
photo = photo + ‘,‘+url;
valueId.value = photo;

var li = document.createElement("li");
var img = document.createElement("img");
var em = document.createElement("em");
var a = document.createElement("a");
a.href = "javascript:;";
a.setAttribute("class", "xc_del");
a.setAttribute("onclick", "$.fn.qiniuUpload.delImg(this,‘photo‘)");
img.src = url;
li.appendChild(em);
li.appendChild(img);
li.appendChild(a);
li.style.display = "inline-block";
photoshow.appendChild(li);
}
}
$.fn.qiniuUpload.delImg=function(obj,valueId){//刪除
var photo = $("#"+valueId).val();
if (photo.substr(0,1)==‘,‘) photo=photo.substr(1);
var arr=new Array();
arr=photo.split(",");
arr.splice($(obj).parent().find("li").index(obj),1);
arr.join(",");
$("#"+valueId).val(arr);
$(obj).parent().remove();
//$(obj).siblings("img").remove();
//$(obj).remove();
}
})(jQuery);

七牛雲js直傳外掛程式