由于公司需要做上传需求,查看很多文档发现有个插件叫做uploadify可以实现该需求(文档:http://www.uploadify.com/documentation/) ,中文API参照:
uploadify是基于flash的,现在HTML5广泛应用,所以选择了UploadiFive(基于H5开发的,下载尼玛的还要钱,谷歌很多免费,请自行下载)
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" href="/static/static_20160810/xuanxiu/css/uploadifive.css">
<script src="jquery.uploadifive.min.js"></script>
<input id="yyzz" name="file" class="yyzz" type="file" multiple="true">
var fd = {"token":$("input[name='token']").val() #获取token,需后台处理传过来
$("#yyzz").uploadifive({
'uploadScript' : 'http://upload.qiniu.com/',
'buttonText': "",
'auto': true,
'width': 60,
'height': 60,
'method': 'post',
'queueID': 'queue',
'fileObjName' : 'file', #由于七牛需要定义这个参数名为file
'onAddQueueItem' : function(file) {
fd["key"] = 'media/'+ file.name #修改上传到七牛的文件名
},
'formData' : fd,
'removeCompleted':false,
'fileType' : 'image/*',
'onUploadComplete' : function(file, data) { #成功或者失败都回调该函数
console.log(file);
}
});
效果如下: