其有效这个组件之前，原先是想接着用webuploader的，毕竟用过了，比较熟习，而且也很好用。然鹅，因为是要上传到七牛，碰到了跨域的题目，尝试过网上的几种解决要领，都没用。只好用七牛文档内里的plupload，hhhhhh，官方文档引荐的，总归不会有什么题目~着实这篇文章咧，不是地道的怎样用plupload，会有一部分逻辑处置惩罚（头脑着实不好用，怕忘记了到时候还要从新想一遍逻辑，想一想照样记下来吧）
https://developer.qiniu.com/k… 这个是七牛官网Javascript SDK的文档，项目历程当中碰到的题目，也都是直接翻文档。因为用的plupload，有些参数七牛的文档没那末细致，http://www.cnblogs.com/2050/p… 这个链接是从七牛官网跳转过去的~很细致。因为官方文档已写得很细致，这边就不过量的引见参数、要领啥的，把项目中有注意到的参数、碰到的题目及解决要领整顿一下。
大抵历程是如许的
能够去github上面下载SDK源码，也能够经由过程NPM或许Bower装置。（官网有装置教程）
把js文件引入，我是用plupload.full.min.js、moxie.min.js、qiniu.min.js、Moxie.swf
因为是前端的关联，七牛的账号密码，包含token、下载资本用的bucket域名等这些是背景的小伙伴供应的，在用到图片上传之前，先经由过程背景小伙伴供应的接口要求七牛的token
接下去就能够写代码啦（贴完代码发明本身写了好一些逻辑处置惩罚，赶忙跳上来先把一些能够分享的东西写到上面来）
auto_start：是不是自动上传，平常单图片上传的话，我会设会true，并且在FileUploaded事宜中猎取到图片的地点后，在页面中显现预览。多图片的话，就设为false，比及提交时，挪用start要领一同上传，比方imgUploader.start()，上传的时候会久一点，然则不会有许多无用的图片占用存储空间（这也是项目中的需求啦）
在项目中，有多个处所用到单图片上传，我就把上传封装在一个要领中，如许能够会想要重写某个事宜，能够经由过程绑定该事宜完成，比方imgUploader.bind(‘FileUploaded’, function (up, file, info) {));
在多图片上传的历程当中，常常会涌现http error.的毛病，然则单图片历来不会。一开始以为是一会儿上传太多张的原因，就把auto_start改成true，然鹅照样会报错。。。
我抱着天无绝人之路盯着chrome开发者东西中的network看了良久，发明报http error的IP都是同一个！！！我就翻开qiniu.js拿了上传域名中的http://up.qiniu.com去剖析，发明真有谁人IP，再然后，我把http://up-z2.qiniu.com悉数换成http://upload-z2.qiniu.com，就能够了~因为不知道为何会如许，所以只能说假如有碰到跟我一样的题目能够碰运气，不保证有效~hhhhh
另有一个题目昂，趁便提一下，项目中，我有运用requirejs，因为plupload和qiniu.js这些不是按AMD或许CMD啥的范例构造的，做了一下处置惩罚，约莫长如许
shim: {
'moxie': {
deps: ['jquery']
},
'plupload': {
exports: 'plupload'
},
'Qiniu': {
deps: ['plupload'],
exports: 'Qiniu'
}
}单图片上传没啥好说的，直接上多图片上传的代码
// 界面的上传按钮和图片列表
<div id="uploader">
<div id="uploaderShopContainer">
<!--用来寄存item-->
<div id="fileList" class="uploader-list"></div>
<a class="btn-normal blue-btn" id="uploadShopPic" href="#" >
<span>上传图片</span>
</a>
</div>
</div>
<ul id="shopPicList" class="pic-cont"></ul>// js
var imgUploader, // 上传对象
uploadStoreImgUrl = [], // 当前图片列表（在编辑的情况下，图片列表能够不会为空，这个变量也是作为表单上传中图片列表的参数）
uploadSuccessList = [], // 图片上传胜利后返回的列表
fileNameList = []; // 增加图片后的行列
$.ajax({
url: 'api/qiniu/token', // 猎取七牛token的url（这个是背景给的）
method: 'GET',
success: function (data) {
imgUploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上传形式，顺次退步
browse_button: 'uploadShopPic', // 上传挑选的点选按钮，必需
container: 'uploaderShopContainer', // 上传地区DOM ID，默许是browser_button的父元素
flash_swf_url: '../vendor/js/plupload/Moxie.swf',
dragdrop: false,
auto_start: false, // 挑选文件后自动上传，若封闭须要本身绑定事宜触发上传
multi_selection: true,
unique_names: true,
max_retries: 0, // 上传失利最大重试次数
save_key: false,
uptoken:data.token, // 这个就是要求返回的七牛token啦
uptoken_url:'api/qiniu/token',
domain: '<Your bucket domain>', // bucket域名，下载资本时用到，必需
chunk_size: '4mb', // 分块上传时，每块的体积
resize:true,
filters : { // 限定上传的文件范例、大小等
mime_types: [{title : "Image files", extensions:"jpg,gif,png"}]
},
init: {
'FilesAdded': function(up, files) {
// 因为需求中这个图片列表最多只能有10张，推断是不是凌驾，凌驾的则移除
var count = files.length + uploadStoreImgUrl.length + fileNameList.length;
if (files.length > 10 && (uploadStoreImgUrl.length+fileNameList.length) == 0) {
var addLength = files.length;
for (var i = addLength - 1; i > addLength-1; i--) {
imgUploader.removeFile(files[i].id);
files.splice(i, 1);
}
}
if (count > 10) {
var addFile = files.length - (count - 10) - 1, tempLength = files.length;
for (var m = tempLength-1; m > addFile; m--) {
imgUploader.removeFile(files[m].id);
files.splice(m, 1);
}
}
plupload.each(files, function(file) {
// 文件增加举行列后,处置惩罚相干的事变
// 上传前预览
var isAdd = true;
// 先推断要上传的图片是不是反复
for (var i = 0; i < fileNameList.length; i++) {
if (file.name == fileNameList[i]) {
isAdd = false;
return false;
}
}
// 假如不是反复的，则增加到上传行列，并且在页面预览
if (isAdd) {
fileNameList.push(file.name);
var preloader = new mOxie.Image();
preloader.onload = function() {
preloader.downsize( 100, 100);
var imgItem = '<img id="'+file.id+'" name="'+file.name+'" src="'+preloader.getAsDataURL()+'" class="pic-thumbnail">';
var liCont = '<li style="margin-left: 8px;">'+imgItem+'<div class="icon-close close-icon"></div></li>';
$('#shopPicList').append(liCont);
};
preloader.load(file.getSource());
}
});
},
'BeforeUpload': function(up, file) {
// 每一个文件上传前,处置惩罚相干的事变
},
'UploadProgress': function(up, file) {
// 每一个文件上传时,处置惩罚相干的事变
},
'FileUploaded': function(up, file, info) {
// 上传胜利后，返回图片途径，domain就是上面的domain参
var domain = up.getOption('domain');
var res = '';
if (typeof(info) == "string") {
res = $.parseJSON(info);
} else {
res = info.response;
if (typeof(res) == "string") {
res = $.parseJSON(res);
}
}
uploadStoreImgUrl.push(domain + res.key);
uploadSuccessList.push(res.key);
},
'Error': function(up, file, err, errTip) {
base.hideLoading();
//上传失足时,处置惩罚相干的事变
if (file.code=='-600'){
base.showAlertDialog('上传图片的大小不能凌驾10mb！');
} else if (file.code=='-601'){
base.showAlertDialog('上传图片的花样有误！')
} else {
base.showAlertDialog(err);
}
},
'UploadComplete': function(files) {
//行列文件处置惩罚完毕后,处置惩罚相干的事变
// 假如上传胜利返回的图片个数和行列中的图片个数一样，则一切图片上传胜利
if (uploadSuccessList.length == fileNameList.length) {
}
},
'Key': function(up, file) {
// 若想在前端对每一个文件的key举行个性化处置惩罚，能够设置该函数
// 该设置必需要在 unique_names: false , save_key: false 时才见效
var timestamp = Date.parse(new Date());
var key = "data/car/web/uuid/"+file.name+'/'+timestamp;
// do something with key
return key;
}
}
});}}); // 这个是删除的逻辑推断
$('body').on('click', '.close-icon', function () {
var id = $(this).siblings('.pic-thumbnail').attr('id');
var name = $(this).siblings('.pic-thumbnail').attr('name');
var liIndex = $(this).parent().index();
// var uploadImgList = uploadStoreImgUrl.split(',');
// uploadStoreImgUrl = '';
if (liIndex < uploadStoreImgUrl.length) {
uploadStoreImgUrl.splice(liIndex,1);
}
$(this).parent().remove();
if (!(id == undefined || id == 'undefined')) {
storeImgObj.removeFile(id);
$.each(fileNameList, function(index,item){
// index是索引值（即下标） item是每次遍历获得的值；
if(item == name){
fileNameList.splice(index,1);
}
});
}
});以上代码有许多逻辑处置惩罚，能够疏忽。关键步骤都有增加解释，大抵流程就是，
在图片增加到上传行列之前，先推断加了这些图片是不是凌驾了图片的限定数目（比方10张），假如凌驾，则移除过剩的（预览图片上面有删除按钮，能够删掉，再增加寄几想要的图片），假如图片有反复的，反复的也不增加，做完这些处置惩罚后，将图片增加到上传行列中。
等表单提交时，触发图片上传，把上传胜利后返回的图片途径增加到图片胜利列表和作为表单图片列表参数的列表，假如图片胜利列表和图片行列中的图片数目一致，则提交表单。
删除的话，作为表单参数的列表中的图片地点和行列中的图片地点也要删除。
好吧。讲真，我太烦琐了。。。= =
