作為一個后端能寫前端插件就不要要求那么高了，就能上傳就差不多了。。。
直接來代碼了，一開始想用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);