七牛云js直传插件

Posted 2021-01-02 胡不懂

作为一个后端能写前端插件就不要要求那么高了，就能上传就差不多了。。。

直接来代码了，一开始想用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);